EV Scatterplot

borrowed somebody else's and customized lightly

by sunnywiz

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'Price vs Range of selected EVs'
    },
    xAxis: {
    	  min: 0, 
        max: 100000,
        title: {
            enabled: true,
            text: 'Price ($)'
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
    },
    yAxis: {
    	  min: 0,
        max: 350,
        title: {
            text: 'Range (Mi)'
        }
    },
    legend: {
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom',
        floating: false,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
        borderWidth: 1
    },
    plotOptions: {
        scatter: {            
            dataLabels : { 
            	enabled: true,
              format: '{key}'
            },
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            tooltip: {
                headerFormat: '<b>{point.key} {series.name}</b><br>',
                pointFormat: '${point.x}, {point.y}Mi'
            }
        }
    },
    series: [
    // All data from various pages at insideevs.com
    {
        name: '2016 BEV',
        marker: { 
        	symbol: 'circle'
        },
        color: 'rgba(255, 0, 0, 1.0)',
        data: [ 
				{ name: 'Nissan Leaf', x: 24045, y: 107},
        { name: 'Tesla Model S 60D', x: 66700, y: 218},
        { name: 'Tesla Model X 75D', x: 82500, y: 238},        
        { name: 'BMW i3', x: 37095, y: 114},
        { name: 'Ford Focus Electric', x:22545, y:76}, 
        {...