charts/bar

47 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Bar chart maxBarThickness property

The maxBarThickness property ensures that bars are not sized thicker than this value.

Bar chart dataset properties table

Bar chart datasets support the following properties in data.datasets[index]: backgroundColor (Color, scriptable, indexable, default 'rgba(0, 0, 0, 0.1)'), base (number, scriptable, indexable), barPercentage (number, default 0.9), barThickness (number|string), borderColor (Color, scriptable, indexable, default 'rgba(0, 0, 0, 0.1)'), borderSkipped (string|boolean, scriptable, indexable, default 'start'), borderWidth (number|object, scriptable, indexable, default 0), borderRadius (number|object, scriptable, indexable, default 0), categoryPercentage (number, default 0.8), clip (number|object|false), data (object|object[]|number[]|string[], required), grouped (boolean, default true), hoverBackgroundColor (Color, scriptable, indexable), hoverBorderColor (Color, scriptable, indexable), hoverBorderWidth (number, scriptable, indexable, default 1), hoverBorderRadius (number, scriptable, indexable, default 0), indexAxis (string, default 'x'), inflateAmount (number|'auto', scriptable, indexable, default 'auto'), maxBarThickness (number), minBarLength (number), label (string, default ''), order (number, default 0), pointStyle (pointStyle, scriptable, default 'circle'), skipNull (boolean), stack (string, default 'bar'), xAxisID (string, default first x axis), yAxisID (string, default first y axis).

Bar chart base property

The base property sets the base value for the bar in data units along the value axis. If not set, it defaults to the value axis base value.

Bar chart grouped property

The grouped property controls whether bars should be grouped on the index axis. When true, all datasets at the same index value are placed next to each other, centered on that index value. When false, each bar is placed at its actual index-axis value.

Bar chart indexAxis property

The indexAxis property sets the base axis of the dataset. Use 'x' for vertical bars and 'y' for horizontal bars.

Bar chart skipNull property

If skipNull is true, null or undefined values will not be used for spacing calculations when determining bar size.

Bar chart stack property

The stack property specifies the ID of the group to which this dataset belongs. When stacked, each group will be a separate stack.

Bar chart borderSkipped options

The borderSkipped property defines which edge to skip when drawing the bar border. Options are: 'start', 'end', 'middle' (only valid on stacked bars), 'bottom', 'left', 'top', 'right', false (don't skip any borders), true (skip all borders). For negative bars in a vertical chart, top and bottom are flipped. For horizontal charts, left and right are flipped.

Bar chart borderWidth configuration

If borderWidth is a number, it applies to all sides of the rectangle (left, top, right, bottom), except those in borderSkipped. If an object, the left, right, top, and bottom properties can be specified individually. Omitted borders and those in borderSkipped are skipped.

Bar chart borderRadius configuration

If borderRadius is a number, it applies to all corners of the rectangle (topLeft, topRight, bottomLeft, bottomRight), except corners touching the borderSkipped edge. If an object, topLeft, topRight, bottomLeft, and bottomRight can be specified individually. Omitted corners and those touching borderSkipped are skipped. When borderRadius is a number and the chart is stacked, the radius applies only to bars at the edges of the stack or floating bars. Use object syntax to override this behavior.

Bar chart inflateAmount property

The inflateAmount property inflates the rectangles used to draw the bars, which can hide artifacts between bars when barPercentage * categoryPercentage equals 1. The default value 'auto' should work in most cases.

Bar chart barPercentage definition

barPercentage is a percent value between 0 and 1 that defines how much of the available width each bar should take within the category width. A value of 1.0 takes the whole category width and places bars right next to each other.

Bar chart categoryPercentage definition

categoryPercentage is a percent value between 0 and 1 that defines how much of the available width each category should take within the sample width.

Bar chart barThickness property

If barThickness is a number, it sets the width of each bar in pixels and barPercentage and categoryPercentage are ignored. If set to 'flex', base sample widths are calculated automatically based on adjacent samples to take full available widths without overlap, and bars are sized using barPercentage and categoryPercentage, resulting in variable bar widths when data are not evenly spaced. If not set (default), base sample widths are calculated using the smallest interval preventing bar overlap, and bars are sized with barPercentage and categoryPercentage, always generating equally sized bars.

Bar chart stacking configuration

Bar charts can be configured into stacked bar charts by setting stacked: true on both the x and y axes. Stacked bar charts show how one data series is made up of smaller pieces.

Horizontal bar chart configuration

To create a horizontal bar chart, set the indexAxis property to 'y' in the options object. The default is 'x' which shows vertical bars. Configuration options for horizontal bar charts are the same as for vertical bar charts, except options specified on the x-axis apply to the y-axis in a horizontal bar chart.

Bar chart internal data format

Bar chart internal data format is {x, y, _custom} where _custom is an optional object defining stacked bar properties: {start, end, barStart, barEnd, min, max}. start and end are the input values. barStart is closer to origin and barEnd is further from origin.

Bar chart horizontal example

Example creating a horizontal bar chart with 7 bars: const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ axis: 'y', label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] }; const config = { type: 'bar', data, options: { indexAxis: 'y', } }; const myChart = new Chart(ctx, config);

Bar chart dataset configuration example

Example dataset configuration with barPercentage: 0.5, barThickness: 6, maxBarThickness: 8, minBarLength: 2, data: [10, 20, 30, 40, 50, 60, 70].

Bar chart scale configuration example

Example scale configuration for bar chart: options = { scales: { x: { grid: { offset: true } } } };

Stacked bar chart example code

Example creating a stacked bar chart: const stackedBar = new Chart(ctx, { type: 'bar', data: data, options: { scales: { x: { stacked: true }, y: { stacked: true } } } });

Basic bar chart example

To create a bar chart, add a canvas element to your HTML page, include Chart.js from a CDN, and instantiate a new Chart object with type 'bar', labels, datasets, and options. Example code: const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } });

Tree-shaking example: Bar chart components

To enable tree-shaking for a bar chart, import Chart and specific components: Chart, Colors, BarController, CategoryScale, LinearScale, BarElement, and Legend. Then call Chart.register() with these components before creating the chart.

Bar chart minimum components

Bar chart requires BarController, BarElement, and default scales CategoryScale (x-axis) and LinearScale (y-axis).

hoverBorderWidth and hoverBorderColor dataset options

Dataset options hoverBorderWidth and hoverBorderColor control the border appearance when a data element is in a hover or active state. These apply to bar charts and other chart types that display element borders.

borderSkipped option in bar charts

The borderSkipped option in bar charts determines whether borders are drawn on all sides of the bar rectangles. When set to false, borders are drawn on all sides, which is useful when using borderRadius to display the rounded corners properly.

Bar chart borderRadius option

The borderRadius option controls the corner radius of bar chart rectangles. It accepts numeric values to set the radius in pixels. Setting borderRadius to Number.MAX_VALUE creates fully rounded corners. Setting borderSkipped to false ensures the border is drawn on all sides, including when borderRadius is applied.

Bar chart example with border radius

Example showing two bar datasets: one with borderRadius set to Number.MAX_VALUE for fully rounded corners, and another with borderRadius set to 5 pixels for subtly rounded corners. Both use borderSkipped: false to ensure all borders are visible.

Horizontal bar chart configuration example

const config = { type: 'bar', data: data, options: { indexAxis: 'y', elements: { bar: { borderWidth: 2, } }, responsive: true, plugins: { legend: { position: 'right', }, title: { display: true, text: 'Chart.js Horizontal Bar Chart' } } }, };

Create horizontal bar chart with indexAxis option

To create a horizontal bar chart, set the indexAxis option to 'y' in the chart configuration. This rotates the bar chart so bars extend horizontally instead of vertically. The chart type remains 'bar'.

Floating bars: [number, number] data format

Floating bars use [number, number][] as the data type, where each pair represents the beginning and end value for each bar. This allows bars to start at any value instead of always starting at 0.

Floating bar chart example

Stack property groups datasets into separate stacks

The stack property on a dataset determines which stack group it belongs to. Datasets with the same stack value are stacked together. Datasets with different stack values create separate stacks displayed side by side. For example, datasets with stack: 'Stack 0' are stacked together, while datasets with stack: 'Stack 1' form a separate stack.

Stacked bar chart configuration example with multiple stacks

This example shows a bar chart with three datasets: two datasets belong to 'Stack 0' (red and blue) and one dataset belongs to 'Stack 1' (green). The configuration uses type: 'bar', with scales.x.stacked: true and scales.y.stacked: true to enable stacking. The datasets use backgroundColor to set colors and the stack property to group them.

Stacked bar chart configuration

To create a stacked bar chart, set the chart type to 'bar' and configure both x and y scales with stacked: true. Each dataset defines a bar series with label, data, and backgroundColor properties.

Stacked bar chart example

const config = { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], datasets: [ { label: 'Dataset 1', data: [10, 20, 30, 40, 50, 60, 70], backgroundColor: 'red', }, { label: 'Dataset 2', data: [15, 25, 35, 45, 55, 65, 75], backgroundColor: 'blue', }, { label: 'Dataset 3', data: [20, 30, 40, 50, 60, 70, 80], backgroundColor: 'green', }, ] }, options: { plugins: { title: { display: true, text: 'Chart.js Bar Chart - Stacked' }, }, responsive: true, scales: { x: { stacked: true, }, y: { stacked: true } } } };

Modifying bar chart data dynamically

Chart data can be modified by updating chart.data.datasets and chart.data.labels, then calling chart.update(). This allows adding or removing data points, changing values, and adding new labels to all datasets.

Bar chart title configuration

A bar chart title is configured in options.plugins.title with display set to true and text set to the title string.

Vertical bar chart basic configuration

A vertical bar chart is created by setting type to 'bar'. The chart displays datasets with label, data array, borderColor, and backgroundColor properties. The example shows two datasets with month labels on the x-axis and values ranging from -100 to 100 on the y-axis.

Bar chart dataset properties for styling

Bar chart datasets support the following properties: label (string for legend), data (array of values), borderColor (color of bar borders), backgroundColor (color fill of bars). The backgroundColor is typically set with transparency using Utils.transparentize() to blend overlapping bars.

Adding datasets to bar chart dynamically

New datasets can be added to a bar chart by creating an object with label, backgroundColor, borderColor, borderWidth, and data properties, then pushing it to chart.data.datasets and calling chart.update() to re-render.

Bar chart legend position configuration

The legend position for a bar chart is configured in options.plugins.legend.position. Setting it to 'top' places the legend above the chart.

Bar chart elements configuration for background and border

Bar chart elements can be configured with backgroundColor, borderColor, and borderWidth properties under the elements.bar object in chart options. These properties support both static values and scriptable functions that receive context.

Bar chart scriptable backgroundColor and borderColor example

A bar chart can use scriptable options for backgroundColor and borderColor, where a function receives a context object. The context object has a parsed property containing the y value. Based on the y value, colors can be conditionally assigned. In this example, values below -50 get red (#D60000), values -50 to 0 get orange (#F46300), values 0 to 50 get blue (#0358B6), and values above 50 get green (#44DE28). The borderColor is opaque while backgroundColor is transparentized based on the absolute value of y divided by 150.

horizontalBar chart type removed in v3

The `horizontalBar` chart type was removed in Chart.js 3.x. Horizontal bar charts should now be configured using the `indexAxis` option on regular bar charts.

Bar percentage options moved to dataset in v3

In Chart.js 3.x, the following options were moved from scale configuration to dataset options: `barPercentage`, `barThickness`, `categoryPercentage`, `maxBarThickness`, and `minBarLength`.

Horizontal Bar tooltip mode changed in v3

In Chart.js 3.x, the horizontal bar chart default tooltip mode was changed from `'index'` to `'nearest'` to match vertical bar charts.

Give your agent this brain