Highcharts

by masudcsesust04

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var lineValue = 6.0;
Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    exporting: {
        enabled: true
    },    
    credits: {
        enabled: false
    },
    title: {
        text: 'VEHICLE COMPARABLES'
    },
    subtitle: {
        text: ''
    },
    xAxis: [{    		
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true,
        //tickColor: 'transparent',
        labels: {
           enabled: false
       },
        plotLines: [{
        	visible: true,
          zIndex: 5,
        	label: {
          	text: '+'+ lineValue +'%',
            rotation: 360,
            x: -8,
            y: -8,
            style: {
            	color: 'green',
            	fontWeight: 'bold',
            }
          },
          color: 'green', // Color value
          dashStyle: 'dash', // Style of the plot line. Default to solid
          value: lineValue, // Value of where the line will appear
          width: 3 // Width of the line    
        }]
    }],
    yAxis: [{ // Primary yAxis
        labels: {
        		enabled: false,
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        visible: false,
        title: {
            text: '',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: '',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
        		enabled: false,
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true,
        gridLineColor: 'transparent'
    }],
    labels: {
        items: [{
            html: 'Your vehicle is <span style="color:green; font-weight: bold;">'+...