Column Chart

Data visualisation using SVG Column Chart

Dependencies

• Swipe Content
• Chart Plugin

How to

Use this component to create column charts to rapresent your data.

You can initialize your chart using the Chart object and setting the type option equal to 'column':

var columnChart = document.getElementById('column-chart-1');
if(columnChart) {
  new Chart({
    element: columnChart,
    type: 'column',
    xAxis: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    datasets: [
      {
        data: [1, 2, 3, 12, 8, 7, 10, 4, 9, 5, 16, 3]
      }
    ]
  });
}

Options #

The component comes with a list of options you can use to customize your chart.

Column #

Use the column option to change the aspect of the chart columns:

var columnChart = document.getElementById('column-chart-1');
if(columnChart) {
  new Chart({
    element: columnChart,
    type: 'column',
    column: {
      width: '60%', // percentage value - column width
      radius: '4px', // px value - column border radius
      gap: '2px', // px value - distance between two columns of different sets (multi-set variation only)
    },
    // ...
  });
}

Data Sets #

Pass your data using the data property of the datasets option:

var columnChart = document.getElementById('column-chart-1');
if(columnChart) {
  new Chart({
    element: columnChart,
    type: 'column',
    xAxis: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    },
    datasets: [
      {data: [1, 2, 3, 12, 8, 7, 10, 4, 9, 5, 16, 3]},
    ],
    // ...
  });
}

For multi-set charts, you can pass multiple data arrays (see --multiset demo):

var columnChart = document.getElementById('column-chart-1');
if(columnChart) {
  new Chart({
    element: columnChart,
    type: 'column',
    xAxis: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    },
    datasets: [
      {data: [1, 2, 3, 12, 8, 7, 10, 4, 9, 5, 16, 3]},
      {data: [5, 7, 11, 13, 18, 16, 17, 13, 16, 8, 15, 8]}
    ],
    // ...
  });
}

If you want your multi-set data to be stacked, use the stacked option (see --stacked demo):

var columnChart = document.getElementById('column-chart-1');
if(columnChart) {
  new Chart({
    element: columnChart,
    type: 'column',
    stacked: true,
    xAxis: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    },
    datasets: [
      {data: [1, 2, 3, 12, 8, 7, 10, 4, 9, 5, 16, 3]},
      {data: [5, 7, 11, 13, 18, 16, 17, 13, 16, 8, 15, 8]}
    ],
    // ...
  });
}

Axis Options #

For each axis, you can set the following options:

• line: set to true if you want to show the axis line;
• legend: add a legend to the axis;
• labels: set it to true if you want to show labels on the axis. For the x-axis, you can also pass an array of predefined labels (e.g, ['2018', '2019', '2020']);
• labelModifier: function to modify the axis label values;
• ticks: set to true if you want to add ticks to the axis (applicable to x-axis only);
• guides: set to false if you want to hide the chart horizontal guides (applicable to x-axis only).

Tooltips #

You can use the following options to customize the chart tooltips:

• enabled: set to true to show tooltips;
• customHTML: function to customize the tooltip content;
• classes: list of custom classes to be added to the tooltip;
• position: it could be top or bottom; in this case the tooltip will be visible in the top or bottom part of the chart. If not set, the tooltip vertical position will change to follow the chart. 

new Chart({
  element: columnChart,
  type: 'column',
  xAxis: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  },
  datasets: [
    {data: [1, 2, 3, 12, 8, 7, 10, 4, 9, 5, 16, 3]},
  ],
  tooltip: {
    enabled: true,
    customHTML: function(index, chartOptions, datasetIndex) {
      // x-axis value: chartOptions.xAxis.labels[index]
      // y-axis value: chartOptions.datasets[datasetIndex].data[index]
      return '<span>'+chartOptions.xAxis.labels[index] + ':</span> $'+chartOptions.datasets[datasetIndex].data[index];
    }
  }
  // ...
});

Animations #

Use the animate option to animate the chart data when it enters the viewport.

new Chart({
  element: columnChart1,
  type: 'column',
  datasets: [
    {
      data: [1, 2, 3, 12, 8, 7, 10, 4, 9, 5, 16, 3]
    }
  ],
  animate: true,
  // ...
});

Categories

• Data Display > Chart

Bug report & feedback

Component Github page ↗