Highcharts Demo

author(s): Torstein Hønsi

by Ravinder Bhardwaj

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 200px; background: #fff"></div>

JavaScript

Highcharts.chart('container', {
    chart : {
    	type: 'bar',
      backgroundColor:'rgba(255, 255, 255, 0.1)'
    },
		xAxis: [{
    title: {
            text: 'xAxisTitle',
            style: {
              fontSize: '12px',
              fontWeight: 'bold',
              color: '#848e96'
            }
          },
          lineColor: '#DDDDDD',
          lineWidth: 0.7,
          labels: {
            style: {
              fontSize: '11px',
              color: '#848e96'
            },
            autoRotation: [0, -90],
            rotation: 0,
            useHTML: true
          },
          tickInterval: 1,
          tickmarkPlacement: 'on',
          tickLength: 6,
          startOnTick: true
    }],
    yAxis: [{
          title: {
            text: 'yAxisTitle',
            y: 5,
            style: {
              fontSize: '12px',
              fontWeight: 'bold',
              color: '#848e96'
            }
          },
          lineColor: '#DDDDDD',
          lineWidth: 1,
          gridLineColor: '#DDDDDD',
          gridLineWidth: 0,
          tickWidth: 1,
          tickLength: 6,
          labels: {
            style: {
              fontSize: '11px',
              color: '#848e96'
            },
            rotation: 0
          },
          startOnTick: false,
          endOnTick: true,
          minPadding: 0.0,
          ceiling: undefined,
          min: undefined,
          max: undefined,
          showEmpty: false
        }],
    tooltip: {
        style: {
            color: '#ffffff',
            fontSize: '12px',
            padding: 15,
            whiteSpace: 'nowrap',
            lineHeight: 1
          },
        backgroundColor: '#000000',
        borderColor: "#000000",
        useHTML: true
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6,...