Highcharts Demo

author(s): Torstein Hønsi

by Alagar Kamuthurai

HTML

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

<div id="container" style="height: 300px; margin-top: 1em"></div>
<button id="button">se categories</button>

JavaScript

$(function () {
    
    $('#container').highcharts({
        chart: {
            renderTo: 'graph',
            type: 'area',
            spacingLeft: 0,
            spacingRight: 0,
            spacingBottom: 0,
            backgroundColor: '#f2f2f2',
            events: {
                load: function () { //this function run for the export button that creates an image to save

                    if (this.options.chart.forExport) {
                        Highcharts.each(this.axes, function (axe) {
                            axe.options.labels.enabled = true;
                        });

                        Highcharts.each(this.series, function (series) {
                            series.update({
                                dataLabels: {
                                    enabled: true
                                }
                            }, false);
                        });

                        this.redraw();
                    }
                    
                    this.legend.allItems[0].legendGroup.attr({
                        translateX: 20
                    });
                }
            }
        },
        plotOptions: {
            series: {
                fillOpacity: 0.7
            }
        },
        loading: {
            labelStyle: {
                color: 'white'
            },
        },
        lang: {
            loading: ''
        },
        title: {
            text: "My Chart",
            align: 'left',
            x:10,
            style: {
                fontFamily: 'Play',
                fontSize: '17px'
            }
        },
       
        legend: {
            align: 'right',
            verticalAlign: 'top',
            borderWidth: 1,
            width: 380,
            floating: true,
            x: -35,
            symbolRadius: 0,
            symbolWidth: 10,
            symbolHeight: 10,
            enabled: true,
            itemStyle: {
                textAlign: 'right',
  ...