Column chart

To track series of data over time.

Anatomy

Title
Actions menu
Y Axis
X Axis
Chart

Example

Coded examples

Basic

Stacked

100% Stacked

Code snippet

									
<div class="card">
  <div class="card-body card-content">
    <div id="chart">
    </div>
  </div>
  <div class="card-spinner">
    <img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
  </div>
</div>

<div class="card">
  <div class="card-body card-content">
    <div id="stacked-chart">
    </div>
  </div>
  <div class="card-spinner">
    <img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
  </div>
</div>

<div class="card">
  <div class="card-body card-content">
    <div id="stacked-chart-100">
    </div>
  </div>
  <div class="card-spinner">
    <img class="loading-indicator" src="assets/spinner.png" alt="Loading indicator">
  </div>
</div>

<!-- Include link to script below to call ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

									
var options = {
      series: [{
      name: 'Net Profit',
      data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
    }, {
      name: 'Revenue',
      data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
    }, {
      name: 'Free Cash Flow',
      data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
    }],
      chart: {
      type: 'bar',
      height: 350,
      toolbar:{
        tools: {
          download: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M336 256C336 229.5 357.5 208 384 208C410.5 208 432 229.5 432 256C432 282.5 410.5 304 384 304C357.5 304 336 282.5 336 256zM176 256C176 229.5 197.5 208 224 208C250.5 208 272 229.5 272 256C272 282.5 250.5 304 224 304C197.5 304 176 282.5 176 256zM112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208C90.51 208 112 229.5 112 256z"/></svg>'
        },
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '55%',
        endingShape: 'rounded'
      },
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      show: true,
      width: 2,
      colors: ['transparent']
    },
    xaxis: {
      categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
    },
    yaxis: {
      title: {
        text: '$ (thousands)'
      }
    },
    fill: {
      opacity: 1
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return "$ " + val + " thousands"
        }
      }
    },
    title: {
      text: 'Example title'
    },
    colors: ['#7B61FF', '#F65F18', '#19A070']
    };

    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();

var options2 = {
  series: [{
  name: 'PRODUCT A',
  data: [44, 55, 41, 67, 22, 43]
}, {
  name: 'PRODUCT B',
  data: [13, 23, 20, 8, 13, 27]
}, {
  name: 'PRODUCT C',
  data: [11, 17, 15, 15, 21, 14]
}, {
  name: 'PRODUCT D',
  data: [21, 7, 25, 13, 22, 8]
}],
  chart: {
  type: 'bar',
  height: 350,
  stacked: true,
  toolbar:{
    tools: {
      download: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M336 256C336 229.5 357.5 208 384 208C410.5 208 432 229.5 432 256C432 282.5 410.5 304 384 304C357.5 304 336 282.5 336 256zM176 256C176 229.5 197.5 208 224 208C250.5 208 272 229.5 272 256C272 282.5 250.5 304 224 304C197.5 304 176 282.5 176 256zM112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208C90.51 208 112 229.5 112 256z"/></svg>',
      reset: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 40v160C496 213.3 485.3 224 472 224h-160C298.8 224 288 213.3 288 200s10.75-24 24-24h100.5C382.8 118.3 322.5 80 256 80C158.1 80 80 158.1 80 256s78.97 176 176 176c41.09 0 81.09-14.47 112.6-40.75c10.16-8.5 25.31-7.156 33.81 3.062c8.5 10.19 7.125 25.31-3.062 33.81c-40.16 33.44-91.17 51.77-143.5 51.77C132.4 479.9 32 379.5 32 256s100.4-223.9 223.9-223.9c79.85 0 152.4 43.46 192.1 109.1V40c0-13.25 10.75-24 24-24S496 26.75 496 40z"/></svg>',
      zoom: false,
      zoomin: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504.1 471l-134-134C399.1 301.5 416 256.8 416 208C416 93.13 322.9 0 208 0S0 93.13 0 208S93.13 416 208 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM208 368c-88.22 0-160-71.78-160-160s71.78-160 160-160s160 71.78 160 160S296.2 368 208 368zM288 184H231.1V128c0-13.26-10.74-24-23.1-24S184 114.7 184 128v56H127.1C114.7 184 104 194.7 104 208s10.73 24 23.1 24H184V288c0 13.26 10.73 24 23.1 24c13.26 0 23.1-10.74 23.1-24V232h56C301.3 232 312 221.3 312 208S301.3 184 288 184z"/></svg>',
      zoomout: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504.1 471l-134-134C399.1 301.5 416 256.8 416 208C416 93.13 322.9 0 208 0S0 93.13 0 208S93.13 416 208 416c48.79 0 93.55-16.91 129-45.04l134 134C475.7 509.7 481.9 512 488 512s12.28-2.344 16.97-7.031C514.3 495.6 514.3 480.4 504.1 471zM208 368c-88.22 0-160-71.78-160-160s71.78-160 160-160s160 71.78 160 160S296.2 368 208 368zM288 184H127.1C114.7 184 104 194.7 104 208s10.73 24 23.1 24h160C301.3 232 312 221.3 312 208S301.3 184 288 184z"/></svg>',
      pan: false
    },
  },
  zoom: {
    enabled: true
  }
},
responsive: [{
  breakpoint: 480,
  options: {
    legend: {
      position: 'bottom',
      offsetX: -10,
      offsetY: 0
    }
  }
}],
plotOptions: {
  bar: {
    horizontal: false,
    borderRadius: 10
  },
},
xaxis: {
  type: 'datetime',
  categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
    '01/05/2011 GMT', '01/06/2011 GMT'
  ],
},
legend: {
  position: 'bottom',
  offsetX: 0,
  offsetY: 6
},
fill: {
  opacity: 1
},
title: {
  text: 'Example title'
},
colors: ['#7B61FF', '#F65F18', '#19A070', '#FFA41B']
};

var chart = new ApexCharts(document.querySelector("#stacked-chart"), options2);
chart.render();



var options3 = {
  series: [{
  name: 'PRODUCT A',
  data: [44, 55, 41, 67, 22, 43, 21, 49]
}, {
  name: 'PRODUCT B',
  data: [13, 23, 20, 8, 13, 27, 33, 12]
}, {
  name: 'PRODUCT C',
  data: [11, 17, 15, 15, 21, 14, 15, 13]
}],
  chart: {
  type: 'bar',
  height: 350,
  stacked: true,
  stackType: '100%',
  toolbar:{
    tools: {
      download: '<svg
										xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M336 256C336 229.5 357.5 208 384 208C410.5 208 432 229.5 432 256C432 282.5 410.5 304 384 304C357.5 304 336 282.5 336 256zM176 256C176 229.5 197.5 208 224 208C250.5 208 272 229.5 272 256C272 282.5 250.5 304 224 304C197.5 304 176 282.5 176 256zM112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208C90.51 208 112 229.5 112 256z"/></svg>'
    },
  },
},
responsive: [{
  breakpoint: 480,
  options: {
    legend: {
      position: 'bottom',
      offsetX: -10,
      offsetY: 0
    }
  }
}],
xaxis: {
  categories: ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2',
    '2012 Q3', '2012 Q4'
  ],
},
fill: {
  opacity: 1
},
legend: {
  position: 'bottom',
  offsetX: 0,
  offsetY: 6
},
title: {
  text: 'Example title'
},
colors: ['#7B61FF', '#F65F18', '#19A070']
};

var chart = new ApexCharts(document.querySelector("#stacked-chart-100"), options3);
chart.render();

Figma prototype

Usage guide

Dos and don'ts

To compare trends over time.

When comparing two or three sets of data.

If the category labels are lengthy, consider using a horizontal bar chart instead.

If you have more than a dozen or so categories, consider using a horizontal bar chart instead.

Should have no more than 9 value labels on the vertical axis.

Do not angle the categorical labels on horizontal axis – difficult to read.