Skip to main content

Stacked Bar chart


var chart = new StackedBarChart(element, data, stack, {
  bar : {
    color :  ['#90ED7D', '#757575', '#00526C', '#6ED1F7', '#238FFF'],
    width : 20,
    curve : {
      show : true,
      bars : 'top'
    },
    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 : 10,
      }
    },
    yAxis : {
      showAxisLine : true,
      firstLabel : true,
      orientation: 'left',
      ticks : {
        values: [ { value : 10, label : '10 m unit' },
                  { value : 30, label : '30 m unit' },
                  { value : 40, label : '40 m unit' },
                  { value : 50, label : '50 m unit' },
                  { value : 80, label : '80 m unit' },
                ],
        font_size : '12px',
        formatter : function(value) {
          return String(value) + 'k units';
        },
      }
    }
  },
  tooltip: {
    show : true,
    listener : 'click touchstart',
    class : 'custom-tooltip',
    formatter : function() {
      return 'Total ' + this.yValue +
             'First : ' + this.stackData.firstquarter + ' Second: ' + this.stackData.secondquarter +
             'Third : ' + this.stackData.thirdquarter + ' Fourth: ' + this.stackData.fourthquarter;
    }
  }
});