Highcharts Demo

author(s): Torstein Hønsi

by kzoon

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

<button id="name">Toggle name</button>
<button id="data-labels">Toggle data labels</button>
<button id="markers">Toggle point markers</button>
<button id="color">Toggle color</button>

<button id="column" style="margin-left: 2em">Column</button>
<button id="line">Line</button>
<button id="spline">Spline</button>
<button id="area">Area</button>
<button id="areaspline">Areaspline</button>
<button id="scatter">Scatter</button>
<button id="pie">Pie</button>

JavaScript

var chart = Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        showEmpty: false
    },

    yAxis: {
        showEmpty: false
    },
  plotOptions: {
        series: {
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        allowPointSelect: true,
        data: [ // use names for display in pie data labels
            ['January',    29.9],
            ['February',   71.5],
            ['March',     106.4],
            ['April',     129.2],
            ['May',       144.0],
            ['June',      176.0],
            ['July',      135.6],
            ['August',    148.5],
            {
                name: 'September',
                y: 216.4,
                selected: true,
                sliced: true
            },
            ['October',   194.1],
            ['November',   95.6],
            ['December',   54.4]
        ],
        marker: {
            enabled: false
        },
        showInLegend: true
    },
    {
        allowPointSelect: true,
        data: [ // use names for display in pie data labels
            ['January',    10],
            ['February',   20],
            ['March',     30],
            ['April',     40],
            ['May',       50],
            ['June',      60],
            ['July',      70],
            ['August',    80],
            {
                name: 'September',
                y:90,
                selected: true,
                sliced: true
            },
            ['October',   100],
            ['November',   90],
            ['December',   80]
        ],
        marker: {
            enabled: false
        },
        showInLegend: true
    }
    ]
});

chart.name = false;
var enableDataLabels = true,
    enableMarkers = true,
    color = false;


// Toggle names
$('#name').click(function () {
    chart.series[0].update({
        name: chart.name ?...