Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
<button id="plain" class="autocompare">Plain</button>
<button id="inverted" class="autocompare">Inverted</button>
<button id="polar" class="autocompare">Polar</button>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
	min-width: 320px;
	max-width: 600px;
	margin: 0 auto;
}

.highcharts-color-0 {
  fill: rgb(40,97,152);
  stroke: rgb(40,97,152);
}

.highcharts-color-1 {
  fill: rgb(57,114,169);
  stroke: rgb(57,114,169);
}

.highcharts-color-2 {
  fill: rgb(65,122,177);
  stroke: rgb(65,122,177);
}

.highcharts-color-3 {
  fill: rgb(74,131,186);
  stroke: rgb(74,131,186);
}

.highcharts-color-4 {
  fill: rgb(82,139,194);
  stroke: rgb(82,139,194);
}

.highcharts-color-5 {
  fill: rgb(90,147,202);
  stroke: rgb(90,147,202);
}

.highcharts-color-6 {
  fill: rgb(99,156,211);
  stroke: rgb(99,156,211);
}

.highcharts-color-7 {
  fill: rgb(107,164,219);
  stroke: rgb(107,164,219);
}

.highcharts-color-8 {
  fill: rgb(116,173,228);
  stroke: rgb(116,173,228);
}

.highcharts-color-9 {
  fill: rgb(124,181,236);
  stroke: rgb(124,181,236);
}

.highcharts-color-10 {
  fill: rgb(133,190,245);
  stroke: rgb(133,190,245);
}

.highcharts-color-11 {
  fill: rgb(141,198,253);
  stroke: rgb(141,198,253);
}

.highcharts-point {
  stroke-width: 0
}

JavaScript

$(function () {
    var chart = Highcharts.chart('container', {
       chart: {
         colorCount: 12
       },

        title: {
            text: 'Chart.update'
        },

        subtitle: {
            text: 'Plain'
        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        tooltip: {
          hideDelay: 500000
        },

        series: [{
            type: 'column',
            colorByPoint: true,
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            showInLegend: false
        }]

    });


    $('#plain').click(function () {
        chart.update({
                colors: ['rgb(40,97,152)', 'rgb(57,114,169)', 'rgb(65,122,177)', 'rgb(74,131,186)', 'rgb(82,139,194)', 'rgb(90,147,202)', 'rgb(99,156,211)', 'rgb(107,164,219)', 'rgb(116,173,228)', 'rgb(124,181,236)', 'rgb(133,190,245)', 'rgb(141,198,253)', 'rgb(150,207,255)', 'rgb(158,215,255)', 'rgb(167,224,255)', 'rgb(175,232,255)', 'rgb(184,241,255)', 'rgb(192,249,255)', 'rgb(201,255,255)'],
            chart: {
                inverted: false,
                polar: false
            },
            subtitle: {
                text: 'Plain'
            }
        });
    });

    $('#inverted').click(function () {
        chart.update({
            chart: {
                inverted: true,
                polar: false
            },
            subtitle: {
                text: 'Inverted'
            }
        });
    });

    $('#polar').click(function () {
        chart.update({
            chart: {
                inverted: false,
                polar: true
            },
            subtitle: {
                text: 'Polar'
            }
        });
    });

});