Full option Stacked Bar Chart

The working example of full option stacked bar chart.

by Bharadhwaj CN

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="https://bharadhwajcn.github.io/cinch-charts/static/css/min/cinch-charts.min.css">
<script src="https://bharadhwajcn.github.io/cinch-charts/static/js/min/stackedBar.min.js"></script>
<div class="chart-container" id="first-chart"> </div>

CSS

.chart-container {
  height: 90%;
  width: 100%;
}

JavaScript

var element = document.querySelector('#first-chart');

var data = [{
  year: '2010',
  firstquarter: 20,
  secondquarter: 25,
  thirdquarter: 18,
  fourthquarter: 22
}, {
  year: '2011',
  firstquarter: 24,
  secondquarter: 22,
  thirdquarter: 22,
  fourthquarter: 21
}, {
  year: '2012',
  firstquarter: 21,
  secondquarter: 26,
  thirdquarter: 19,
  fourthquarter: 23
}, {
  year: '2013',
  firstquarter: 19,
  secondquarter: 21,
  thirdquarter: 21,
  fourthquarter: 19
}, {
  year: '2014',
  firstquarter: 22,
  secondquarter: 19,
  thirdquarter: 17,
  fourthquarter: 21
}, {
  year: '2015',
  firstquarter: 23,
  secondquarter: 25,
  thirdquarter: 22,
  fourthquarter: 24
}, {
  year: '2016',
  firstquarter: 21,
  secondquarter: 22,
  thirdquarter: 25,
  fourthquarter: 23
}];

var stack = ['firstquarter', 'secondquarter', 'thirdquarter', 'fourthquarter'];

var chart = new StackedBarChart(element, data, stack, {
  bar: {
    color: ['#90ED7D', '#757575', '#00526C', '#6ED1F7'],
    width: 20,
    curve: {
    	show : true,
      bars : 'all'
    },
    opacity: 0.8,
    padding: .01,
  },
  margin: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
  },
  transition: {
    animate: true,
    delay: 100,
    duration: 200
  },
  grids: {
    vertical: {
      show: true,
      color: '#999',
      opacity: .5,
      values: ['2010', '2012', '2014', '2016']
    },
    horizontal: {
      show: true,
      color: '#999',
      opacity: .5,
      skipFirst: false,
      skipLast: false,
      values: [0, 10, 30, 40, 50, 80]
    }
  },
  goalLine: {
    value: 60,
    class: 'goalline',
    icon: {
      url: 'https://bharadhwajcn.github.io/cinch-charts/static/images/goal_arrow.png',
      toBase64: true,
      class: 'goal-icon',
      height: 20,
      width: 20,
      left: 0
    }
  },
  axis: {
    xAxis: {
      showAxisLine: true,
      firstLabel: true,
      orientation: 'bottom',
      ticks: {
        values: ['2010', '2012', '2014', '2016'],
        padding:...