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","Jan"];
Highcharts.chart('container', {
   chart: {
 
   },
    title: {
        text: '',

    },
     navigation: {
          buttonOptions: {
            enabled: false
          }
        },
    credits: {
          enabled: false
        },
    	xAxis : {
      /* categories : ["July","Aug","Sep","Oct","Nov","Dec","Jan","Feb"], */
                   tickmarkPlacement: 'on', 
              minPadding: 0,
              maxPadding: 0,
              tickLength : 0,
               labels: {
            align: 'right',
            style: {
              color: '#555555',
              fontSize: "9px",
              fontWeight: 'normal',
              textOverflow: 'none',
              whiteSpace: 'nowrap'
            },
            formatter: function() {
                    return xCategories[this.value];
                      } 
						}
            },
    yAxis: {
    gridLineWidth: 0,
    lineWidth : 1,
    //offset : -2,
    labels : {
								rotation : 0,
								style : {
									fontSize : "10px",
									color : '#666666'
								}
                },
        title: {
            text: ''
        },
          plotLines: [{
            color: '#555555', // Color value
            dashStyle: 'dash', // Style of the plot line. Default to solid
            value: 80, // Value of where the line will appear
            width: 2, // Width of the line 
            label: {
              text: 'Target 80 Days',
            }

          },{
            color: '#555555', 
            dashStyle: 'dash', 
            value: 50, 
            width: 2, 
            label: {
              text: 'Target 43 Days',
            }

          },{
            color: '#555555', 
            dashStyle: 'dash', 
            value: 26, 
            width: 2, 
            label: {
              text: 'Target 26 Days',
            }

          }],
    },
    legend: {
       enabled : false
    },
    tooltip :{
    enabled :...