Bar Chart

    config setup

    2. const data = {
    3.   labels: labels,
    4.   datasets: [{
    5.     label: 'My First Dataset',
    6.     data: [65, 59, 80, 81, 56, 55, 40],
    7.     backgroundColor: [
    8.       'rgba(255, 99, 132, 0.2)',
    9.       'rgba(255, 159, 64, 0.2)',
    10.       'rgba(255, 205, 86, 0.2)',
    11.       'rgba(75, 192, 192, 0.2)',
    12.       'rgba(54, 162, 235, 0.2)',
    13.       'rgba(153, 102, 255, 0.2)',
    14.       'rgba(201, 203, 207, 0.2)'
    15.     borderColor: [
    16.       'rgb(255, 99, 132)',
    17.       'rgb(255, 159, 64)',
    18.       'rgb(255, 205, 86)',
    19.       'rgb(75, 192, 192)',
    20.       'rgb(54, 162, 235)',
    21.       'rgb(153, 102, 255)',
    22.       'rgb(201, 203, 207)'
    23.     ],
    24.     borderWidth: 1
    25.   }]
    26. };

    Namespaces:

    • data.datasets[index] - options for this dataset only
    • options.datasets.bar - options for all bar datasets
    • options.elements.bar - options for all bar elements
    • options - options for the whole chart

    The bar chart allows a number of properties to be specified for each dataset. These are used to set display properties for a specific dataset. For example, the color of the bars is generally set this way. Only the data option needs to be specified in the dataset namespace.

    All these values, if undefined, fallback to the scopes described in

    General

    Styling

    The style of each bar can be controlled with the following properties:

    All these values, if undefined, fallback to the associated elements.bar.* options.

    borderSkipped

    This setting is used to avoid drawing the bar stroke at the base of the fill, or disable the border radius. In general, this does not need to be changed except when creating chart types that derive from a bar chart.

    Note

    For negative bars in a vertical chart, top and bottom are flipped. Same goes for left and right in a horizontal chart.

    Options are:

    • 'start'
    • 'end'
    • 'middle' (only valid on stacked bars: the borders between bars are skipped)
    • 'bottom'
    • 'left'
    • 'top'
    • 'right'
    • false

    borderWidth

    borderRadius

    If this value is a number, it is applied to all corners of the rectangle (topLeft, topRight, bottomLeft, bottomRight), except corners touching the borderSkipped. If this value is an object, the topLeft property defines the top-left corners border radius. Similarly, the topRight, bottomLeft, and bottomRight properties can also be specified. Omitted corners and those touching the are skipped. For example if the top border is skipped, the border radius for the corners topLeft and topRight will be skipped as well.

    Stacked Charts

    When the border radius is supplied as a number and the chart is stacked, the radius will only be applied to the bars that are at the edges of the stack or where the bar is floating. The object syntax can be used to override this behavior.

    inflateAmount

    This option can be used to inflate the rects that are used to draw the bars. This can be used to hide artifacts between bars when barPercentage(#barpercentage) * categoryPercentage(#categorypercentage) is 1. The default value 'auto' should work in most cases.

    The interaction with each bar can be controlled with the following properties:

    All these values, if undefined, fallback to the associated options.

    barPercentage

    Percent (0-1) of the available width each bar should be within the category width. 1.0 will take the whole category width and put the bars right next to each other.

    categoryPercentage

    Percent (0-1) of the available width each category should be within the sample width.

    If this value is a number, it is applied to the width of each bar, in pixels. When this is enforced, barPercentage and categoryPercentage are ignored.

    If set to 'flex', the base sample widths are calculated automatically based on the previous and following samples so that they take the full available widths without overlap. Then, bars are sized using barPercentage and categoryPercentage. There is no gap when the percentage options are 1. This mode generates bars with different widths when data are not evenly spaced.

    If not set (default), the base sample widths are calculated using the smallest interval that prevents bar overlapping, and bars are sized using barPercentage and categoryPercentage. This mode always generates bars equally sized.

    maxBarThickness

    Scale Configuration

    The bar chart sets unique default values for the following configuration from the associated scale options:

    Example scale configuration

    1. options = {
    2.     scales: {
    3.         x: {
    4.             grid: {
    5.               offset: true
    6.             }
    7.         }
    8.     }
    9. };

    If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval, which is the space between the grid lines. If false, the grid line will go right down the middle of the bars. This is set to true for a category scale in a bar chart while false for other scales or chart types by default.

    It is common to want to apply a configuration setting to all created bar charts. The global bar chart settings are stored in Chart.overrides.bar. Changing the global options only affects charts created after the change. Existing charts are not changed.

    barPercentage vs categoryPercentage

    The following shows the relationship between the bar percentage option and the category percentage option.

    All of the supported data structures can be used with bar charts.

    Stacked Bar Chart

    Bar charts can be configured into stacked bar charts by changing the settings on the X and Y axes to enable stacking. Stacked bar charts can be used to show how one data series is made up of a number of smaller pieces.

    1. const stackedBar = new Chart(ctx, {
    2.     type: 'bar',
    3.     data: data,
    4.     options: {
    5.             x: {
    6.                 stacked: true
    7.             },
    8.             y: {
    9.                 stacked: true
    10.             }
    11.         }
    12.     }
    13. });

    A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side. To achieve this you will have to set the indexAxis property in the options object to 'y'. The default for this property is 'x' and thus will show vertical bars.

    Bar Chart - 图2

    config setup

    1. const labels = Utils.months({count: 7});
    2. const data = {
    3.   labels: labels,
    4.   datasets: [{
    5.     axis: 'y',
    6.     label: 'My First Dataset',
    7.     data: [65, 59, 80, 81, 56, 55, 40],
    8.     fill: false,
    9.     backgroundColor: [
    10.       'rgba(255, 99, 132, 0.2)',
    11.       'rgba(255, 159, 64, 0.2)',
    12.       'rgba(255, 205, 86, 0.2)',
    13.       'rgba(75, 192, 192, 0.2)',
    14.       'rgba(54, 162, 235, 0.2)',
    15.       'rgba(153, 102, 255, 0.2)',
    16.       'rgba(201, 203, 207, 0.2)'
    17.     ],
    18.     borderColor: [
    19.       'rgb(255, 99, 132)',
    20.       'rgb(255, 159, 64)',
    21.       'rgb(255, 205, 86)',
    22.       'rgb(75, 192, 192)',
    23.       'rgb(54, 162, 235)',
    24.       'rgb(153, 102, 255)',
    25.       'rgb(201, 203, 207)'
    26.     ],
    27.     borderWidth: 1
    28.   }]

    Horizontal Bar Chart config Options

    The configuration options for the horizontal bar chart are the same as for the . However, any options specified on the x-axis in a bar chart, are applied to the y-axis in a horizontal bar chart.

    Internal data format

    {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. Those two are repeated in barStart (closer to origin), barEnd (further from origin), min and .