Highcharts Demo

author(s): Torstein Hønsi

by Chetan Hanumantha

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; max-width: 800px; margin: 0 auto"></div>

CSS

svg .highcharts-legend .similarCompanies path,
svg .highcharts-legend .yourCompany path {
  display: none;  
}

svg .highcharts-legend .similarCompanies text tspan,
svg .highcharts-legend .yourCompany text tspan {  
  cursor: default;
}

JavaScript

Highcharts.chart('container', {
		exporting: { enabled: false },
    credits: { enabled: false },
    chart: {
        type: 'scatter',
        zoomType: 'xy',
        plotBackgroundColor: '#f6f6f6',
    },
    title: {
        text: 'Incentive Attainment vs. Quota Attainment'
    },
    subtitle: {
        text: 'PRODUCT REVENUE QUOTA'
    },
    xAxis: {
        title: {
            enabled: true,
            text: 'QUOTA ATTAINMENT'
        },
        gridLineWidth: 1,
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true,
        labels: {
          formatter: function() {
              return this.value + ' %';
          }
        }
    },
    yAxis: {
        title: {
            text: 'INCENTIVE ATTAINMENT'
        },
        labels: {
          formatter: function() {
              return this.value + ' %';
          }
        }
    },
    legend: {
       align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        backgroundColor: '#f6f6f6',
        x: 0,
        y: 100,
        labelFormatter: function () {
        		var idx = this.index,
            		name = this.name,
                id = this.options.id;
            
        		console.log(this);
        		console.log('legend.name: '+name);
            if(id === 'yourCompany' || id === 'similarCompanies') {
              return '<div class="' + this.id + '"></div><span style="font-size:14px;font-weight:bold;">' + this.name +'</span><br/>';
            }else {
            	return '<div class="' + this.id + '"></div><span style="font-size:12px;font-weight:normal;">' + this.name +'</span><br/>';
            }
        }
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
...