Highcharts snippets

Commonly used options for HighchartsJS.

A few Highcharts charting options. Full list of Options Reference here.

Put jQuery first

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

Use https in HighchartsJS CDN

More options

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

Enable exporting options

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

Enable drilldown

<script src="https://code.highcharts.com/modules/drilldown.js"></script>

Enable 3D

<script src="https://code.highcharts.com/highcharts-3d.js"></script>

Create a DOM

<div id="chart1" style="wdith: 80%;"></div>

Slightly simple way using jQuery

$(document).ready(function() {
var options = {
    chart: {
        type: 'bar'
    },
    xAxis: {
        categories: [ ]
    },
    Series: [{
        name: 'Bar1',
        data: [1, 2, 3, 4]
    }],
    ...
};
});

$('#chart1').highcharts(options);

Add additional series afterwards:

var chart1 = $('#chart1').highcharts(options).highcharts();
chart1.addSeries({
    name: 'Bar2',
    data: [5, 6, 7, 8]
});

Whole structure not using jQuery

$(function () {
  var chart1 = new Highcharts.Chart({
    chart: {
      renderTo: 'chart1',
      type: '',
      options3d: {
          enabled: true,
          alpha: 45,
          beta: 0
      },
      style: {
          fontFamily: 'Times'
      }
    },
    title: {
        text: ''
    },
    tooltip: {
        formatter: function () {
        }
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        
    },
    credits: { enabled: false },
    series: [{
        name: '',
        data: [ ],
        color: ''
    }, {
        name: '',
        data: [ ],
        color: ''
    }]
    ... 
  })
)};

Chart zooming

chart: {
    zoomType: 'x'
}

To make area plot Y axis starting from minimum/set threshold (Example)

plotOptions: {
    area: {
        threshold: null (or a value)
    }
}

Add multiple charts and set on and off

series [{
    name: 'Column',
    type: 'Column',
    visible: true.
    data: [],
}, {
    name: 'Spline',
    type: 'spline',
    visible: false,
    data: [],
}]
Z. Lu avatar
Z. Lu
Data science, bioinfo, scripting, parasites, retro, plain text.
comments powered by Disqus