Bar Chart

Sets the data values for the bar chart. Can be a single array of numbers for one dataset, an array of arrays for multiple datasets (grouped bars), or a JSON string representation. For multiple datasets, each inner array represents a separate series of bars.

Optional formatted strings to display instead of numeric values. Used in tooltips and value display above bars. If a formatted label is not provided for a data point (null or empty), the numeric value will be displayed instead.

Pass a JSON string of a flat array to share labels across all datasets at the same x position:

Pass a JSON string of a nested array to provide distinct labels per dataset — each inner array corresponds to one series:

Optional array of formatted strings to display as the total value at the top or bottom of each stack (depending on whether the total is positive or negative). Only applies when stacked is true. If not provided, the numeric total (sum of all segments) will be displayed. Can be an array of strings or a JSON string representation. The number of formatted total labels should match the number of data points.

Optional array of colors for each dataset. Can be provided as an array or JSON string. Colors can be named colors (e.g., "--color-red-medium") or named gradients (e.g., "--gradient-teal-medium"). See Colors and Gradients documentation for available options. For multiple datasets, colors are applied per dataset (cycling through the array if there are more datasets than colors). For a single dataset, the first color is used. If not provided, default gradient colors will be used.

When true, hides the legend even when there are multiple datasets. Defaults to false, which displays the legend when there are multiple datasets.

When true, hides the y-axis labels for vertical (non-horizontal) bar charts. Defaults to false, which displays the y-axis with numeric value labels.

When true, hides the value labels displayed outside each bar (above/below for vertical charts, beside for horizontal). Defaults to false, which shows values/totals outside bars. This is independent of tooltips - you can show tooltips (showValuesAsTooltips) with or without bar values.

When true, renders bars horizontally (left to right) instead of vertically. Supports stacking when combined with the stacked property. Values are displayed to the right of positive horizontal bars and to the left of negative bars.

A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Sets the labels for each x-axis datapoint. Required. Can be an array of strings or a JSON string representation of an array. The number of labels should match the number of data points.

Optional array of strings to use as labels for the legend. Only applies when there are multiple datasets (grouped bars). If not provided, default labels will be generated (e.g., "Series 1", "Series 2"). Can be an array of strings or a JSON string representation. The number of legend labels should match the number of datasets.

Optional array of strings to use as sublabels for the legend, displayed 8px to the right of the primary legend labels. Only applies when there are multiple datasets (grouped bars). When provided, the Chart.js built-in legend is replaced with a custom HTML legend that displays both labels and sublabels. Can be an array of strings or a JSON string representation. The number of legend sublabels should match the number of datasets.

When true, hides the value text above each bar and instead shows a tooltip with the value on hover. When false, values are displayed above each bar. For stacked charts, tooltips are always enabled to show individual segment values.

When true, stacks the data series vertically on top of each other. Only applies when there are multiple datasets. The total value is displayed at the top or bottom of each stack when stacked (depending on sign), and tooltips show individual segment values.

Sets the data values for the bar chart. Can be a single array of numbers for one dataset, an array of arrays for multiple datasets (grouped bars), or a JSON string representation. For multiple datasets, each inner array represents a separate series of bars.

Optional formatted strings to display instead of numeric values. Used in tooltips and value display above bars. If a formatted label is not provided for a data point (null or empty), the numeric value will be displayed instead.

Pass a flat string[] to share labels across all datasets at the same x position (e.g. ["$10", "$20", "$30"]). Pass a string[][] to provide distinct labels per dataset — each inner array corresponds to one series (e.g. [["$10", "$20"], ["$15", "$25"]]). Also accepts a JSON string representation of either shape.

Optional array of formatted strings to display as the total value at the top or bottom of each stack (depending on whether the total is positive or negative). Only applies when stacked is true. If not provided, the numeric total (sum of all segments) will be displayed. Can be an array of strings or a JSON string representation. The number of formatted total labels should match the number of data points.

When true, hides the legend even when there are multiple datasets. Defaults to false, which displays the legend when there are multiple datasets.

When true, hides the y-axis labels for vertical (non-horizontal) bar charts. Defaults to false, which displays the y-axis with numeric value labels.

When true, renders bars horizontally (left to right) instead of vertically. Supports stacking when combined with the stacked property. Values are displayed to the right of positive horizontal bars and to the left of negative bars.

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Sets the labels for each x-axis datapoint. Required. Can be an array of strings or a JSON string representation of an array. The number of labels should match the number of data points.

Optional array of strings to use as labels for the legend. Only applies when there are multiple datasets (grouped bars). If not provided, default labels will be generated (e.g., "Series 1", "Series 2"). Can be an array of strings or a JSON string representation. The number of legend labels should match the number of datasets.

When true, hides the value text above each bar and instead shows a tooltip with the value on hover. When false, values are displayed above each bar. For stacked charts, tooltips are always enabled to show individual segment values.

When true, stacks the data series vertically on top of each other. Only applies when there are multiple datasets. The total value is displayed at the top or bottom of each stack when stacked (depending on sign), and tooltips show individual segment values.

Sets the data values for the bar chart. Can be a single array of numbers for one dataset, an array of arrays for multiple datasets (grouped bars), or a JSON string representation. For multiple datasets, each inner array represents a separate series of bars.

Optional formatted strings to display instead of numeric values. Used in tooltips and value display above bars. If a formatted label is not provided for a data point (null or empty), the numeric value will be displayed instead.

Pass a flat string[] to share labels across all datasets at the same x position (e.g. ["$10", "$20", "$30"]). Pass a string[][] to provide distinct labels per dataset — each inner array corresponds to one series (e.g. [["$10", "$20"], ["$15", "$25"]]). Also accepts a JSON string representation of either shape.

Optional array of formatted strings to display as the total value at the top or bottom of each stack (depending on whether the total is positive or negative). Only applies when stacked is true. If not provided, the numeric total (sum of all segments) will be displayed. Can be an array of strings or a JSON string representation. The number of formatted total labels should match the number of data points.

When true, hides the legend even when there are multiple datasets. Defaults to false, which displays the legend when there are multiple datasets.

When true, hides the y-axis labels for vertical (non-horizontal) bar charts. Defaults to false, which displays the y-axis with numeric value labels.

When true, renders bars horizontally (left to right) instead of vertically. Supports stacking when combined with the stacked property. Values are displayed to the right of positive horizontal bars and to the left of negative bars.

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Sets the labels for each x-axis datapoint. Required. Can be an array of strings or a JSON string representation of an array. The number of labels should match the number of data points.

Optional array of strings to use as labels for the legend. Only applies when there are multiple datasets (grouped bars). If not provided, default labels will be generated (e.g., "Series 1", "Series 2"). Can be an array of strings or a JSON string representation. The number of legend labels should match the number of datasets.

Optional array of strings to use as sublabels for the legend, displayed 8px to the right of the primary legend labels. Only applies when there are multiple datasets (grouped bars). When provided, the Chart.js built-in legend is replaced with a custom HTML legend that displays both labels and sublabels. Can be an array of strings or a JSON string representation. The number of legend sublabels should match the number of datasets.

When true, hides the value text above each bar and instead shows a tooltip with the value on hover. When false, values are displayed above each bar. For stacked charts, tooltips are always enabled to show individual segment values.

When true, stacks the data series vertically on top of each other. Only applies when there are multiple datasets. The total value is displayed at the top or bottom of each stack when stacked (depending on sign), and tooltips show individual segment values.