Price index chart

nv atlas

by Nelu Malancea

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

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

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'areaspline',
            backgroundColor: '#faf9f6',
            marginRight: 3,
            alignTicks: false
        },
        title: {
            text: 'Price Index',
            style: {
                color: '#8C8F94',
                fontSize: '13px'
            }
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: [0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100],
            gridLineWidth: 1,
            gridLineDashStyle: 'ShortDash',
            gridLineColor: '#d2d2d2',
            lineWidth: 0,
            tickmarkPlacement: 'on',
            title: {
                text: 'Percentile',
                style: {
                    color: '#8C8F94',
                    textTransform: 'uppercase',
                    fontSize: '10px'
                }
            },
            labels: {
                y: 22,
                style: {
                    color: '#8C8F94',
                    fontSize: '9px'
                }
            },
        },
        yAxis: {
            title: {
                text: 'Unit Price',
                style: {
                    color: '#8C8F94',
                    textTransform: 'uppercase',
                    fontSize: '10px'
                }
            },
            labels: {
                x: 0,
                style: {
                    color: '#8C8F94',
                    fontSize: '9px'
                }
            },
            gridLineWidth: 0,
            min: 55,
            max: 65.5
        },
        tooltip: {
            headerFormat: '',
            pointFormat: '${point.y}'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                    ...