Highcharts Demo

HTML

<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/highcharts-3d.js"></script> <script src="https://code.highcharts.com/modules/stock.js"></script> <script src="https://code.highcharts.com/maps/modules/map.js"></script> <script src="https://code.highcharts.com/modules/gantt.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <script src="https://code.highcharts.com/modules/annotations-advanced.js"></script> <script src="https://code.highcharts.com/modules/data.js"></script> <script src="https://code.highcharts.com/modules/draggable-points.js"></script> <script src="https://code.highcharts.com/modules/static-scale.js"></script> <script src="https://code.highcharts.com/modules/broken-axis.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <script src="https://code.highcharts.com/modules/tilemap.js"></script> <script src="https://code.highcharts.com/modules/timeline.js"></script> <script src="https://code.highcharts.com/modules/treemap.js"></script> <script src="https://code.highcharts.com/modules/treegraph.js"></script> <script src="https://code.highcharts.com/modules/item-series.js"></script> <script src="https://code.highcharts.com/modules/drilldown.js"></script> <script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script> <script src="https://code.highcharts.com/modules/bullet.js"></script> <script src="https://code.highcharts.com/modules/funnel.js"></script> <script src="https://code.highcharts.com/modules/funnel3d.js"></script> <script src="https://code.highcharts.com/modules/pyramid3d.js"></script> <script src="https://code.highcharts.com/modules/networkgraph.js"></script> <script...

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Most Common Drug Used by Decade Based on Usage Rates Each Year'
    },
    subtitle: {
        text: 'Source: Available SAMHSA Reports Based on the % of people who have used the substance in the past year'
    },
    xAxis: {
        categories: ['Pain Relievers', 'Cocaine', 'Hallucinogens', 'Heroin', 'Inhalants', 'Sedatives', 'Stimulants', 'Tranquilizers']
    },
    yAxis: {
        title: {
            text: 'Average Usage Rate (%)'
        }
    },
    series: [{
        name: '1979-1989',
        data: [2.97, 6.25, 2.36, 0.26, 1.84, 2.66, 3.88, 2.87]
    }, {
        name: '1990-1999',
        data: [2.38, 2.14, 1.75, 0.20, 1.11, 0.57, 1.11, 1.15]
    }, {
        name: '2000-2009',
        data: [2.77, 2.14, 2.77, 0.36, 1.19, 0.40, 2.22, 2.68]
    }, {
        name: '2010-2017',
        data: [5.59, 2.77, 2.68, 0.36, 1.19, 0.40, 2.22, 2.68]
    }],
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}%</b><br/>',
        shared: true
    }
});