Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

HTML

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

<div id="container"></div>

CSS

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

JavaScript

var xCategories = ["July","Aug","Sep","Oct","Nov","Dec"];
Highcharts.chart('container', {

    title: {
        text: ''
    },
      navigation: {
          buttonOptions: {
            enabled: false
          }
        },
    credits: {
          enabled: false
        },
		xAxis : [{
      categories : ["July","Aug","Sep","Oct","Nov","Dec","Jan","Feb"], 
                   tickmarkPlacement: 'on', 
                  gridLineWidth: 1,
                  lineWidth : 0,
                   
      opposite: true,
              minPadding: 0,
              maxPadding: 0,
              tickLength : 0,
               labels: {
            align: 'center',
            style: {
              color: '#555555',
              fontSize: "9px",
              fontWeight: 'normal',
              textOverflow: 'none',
              whiteSpace: 'nowrap'
            },
     
            }
            },{
               tickmarkPlacement: 'on', 
            }],
    yAxis: {
    gridLineWidth : 0,
        title: {
            text: ''
        }
    },
    legend: {
    enabled :false
        /* layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle' */
    },

    plotOptions: {
        series: {
           enableMouseTracking: false ,
                 dataLabels: {
                    enabled: true,   
                },
            label: {
                connectorAllowed: false
            },
         
        }
    },

    series: [{
        name: 'Installation',
          type: 'spline',
          marker: {   
              radius: "5",
              symbol : "circle",
                 lineWidth: 0,
            },
        data: [43, 69, 97, 51, 55, 75]
    }, {
        name: 'Manufacturing',
          type: 'spline',
          marker: {   
              radius: "5",
              symbol : "circle",
                 lineWidth: 0,
            },
        data: [24, 37, 32, 40, 18, 60]
    }, {
        name: 'Sales & Distribution',
          type: 'spline',
  ...