Full option Bar Chart

This is a working example of full option 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/bar.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 = [
  ['Jan', 10],
  ['Feb', 70],
  ['Mar', 30],
  ['Apr', 10],
  ['May', 60],
  ['Jun', 45],
  ['Jul', 76],
  ['Aug', 40],
  ['Sep', 40],
  ['Oct', 60],
  ['Nov', 40],
  ['Dec', 80]
];

var chart = new BarChart(element, data, {
  bar: {
    color: '#B8D551',
    width: 20,
    curve: true,
    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: ['Jan', 'Mar', 'May', 'Aug', 'Oct', 'Dec']
    },
    horizontal: {
      show: true,
      color: '#999',
      opacity: .5,
      skipFirst: false,
      skipLast: false,
      values: [10, 30, 50, 70, 90]
    }
  },
  goalLine: {
    value: 60,
    class: 'goalline',
    icon: {
      url: 'https://bharadhwajcn.github.io/fubar-charts/images/goal_arrow.png',
      toBase64: true,
      class: 'goal-icon',
      height: 20,
      width: 20,
      left: 0
    }
  },
  axis: {
    xAxis: {
      showAxisLine: false,
      firstLabel: true,
      orientation: 'bottom',
      ticks: {
        values: [{
          value: 'Jan',
          label: '01'
        }, {
          value: 'Mar',
          label: '03'
        }, {
          value: 'May',
          label: '05'
        }, {
          value: 'Aug',
          label: '08'
        }, {
          value: 'Oct',
          label: '10'
        }, {
          value: 'Dec',
          label: '12'
        }],
        padding: 10,
        position: {
          angle: 30,
          x: -10,
          y: -5
        },
      }
    },
    yAxis: {
      showAxisLine: false,
      firstLabel: false,
      orientation: 'left',
      ticks: {
        values: [10, 30, 50, 70, 90],
        position: {
          angle: 30,
          x: -5,
          y: -5
        },
        fontSize: '12px',
        formatter:...