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