Highcharts cheat sheet

Types of charts

This text presumes you understand which components has every chart.

Basically there are these groups of chart types:

  1. area/ bar/ column/ line
  2. pie/ pyramid

As you can see bellow you use the same code with just different type of chart.

For the first group (area, bar, column, line) you can set stacking – “none”, “normal” and “percent” and charts will look differently:

  • none = all series have minimum together on yAxis minimum
  • normal = every point on xAxis shows sumary of values of all series from yAxis – values are serialized so you see how big part belongs to every series
  • percent = sumary of all values in given xAxis point is taken as 100% and you can see how many % was fulfilled by every series (can be little confusing – you always see 100% regardless total sum)

I would say that stacking can sometimes be confusing and can make chart interpretation harder.Therefore I recommend to use it only when you are sure that it will help to read data from the chart.

Note about chart type “line”: although you can use also stacking type “normal” and “percent” with this chart I think in this case it really does not make sense.Because probability of error judgement of results based on such chart is really big.

 

Area

Area – without stacking

area_chart
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area',
            borderWidth: 1,
            plotBorderWidth: 1,
            marginTop: 40,
            marginBottom: 80,
            marginLeft: 80,
            marginRight: 10
        },
        title: {
            text: 'Person / parties chart'
        },
        xAxis: {
            categories: ['January', 'February', 'March', 'April', 'May']
        },
        yAxis: {
            min: 0,
            tickInterval: 1,
            title: {
                text: 'Total number of parties attended'
            }
        },
        series: [{
            name: 'Jim',
            data: [5, 2, 4, 9, 2]
        }, {
            name: 'Bob',
            data: [2, 6, 3, 2, 2]
        }, {
            name: 'Joe',
            data: [3, 4, 1, 0, 5]
        }]
    });
});

Area – stacked normal

area_chart_stacked_normal Add new section “plotOptions” into code for “area” chart. This section is on the same level as chart, title etc. sections.

...
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
...

Area – stacked percent

area_chart_stacked_percent The same as by stacking type “normal” only with stacking “percent”. I also remove “tickInterval” property to see better ticks. Also text on yAxis should be changed to more propper one.

...
        plotOptions: {
            series: {
                stacking: 'percent'
            }
        },
...

Bar

Bar – without stacking

bar_chart The same code as for area chart. Only type “bar”.

...
        chart: {
            type: 'bar',
...

Bar – stacked normal

bar_chart_stacking_normal Add new section “plotOptions” into code for “bar” chart. This section is on the same level as chart, title etc. sections.

...
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
...

Bar- stacked percent

bar_chart_stacking_percent The same as by stacking type “normal” only with stacking “percent”. I also remove “tickInterval” property to see better ticks. Also text on yAxis should be changed to more propper one.

...
        plotOptions: {
            series: {
                stacking: 'percent'
            }
        },
...

Column

Column – without stacking

column_chart The same code as for “bar” chart. Only different type:

...
        chart: {
            type: 'column',
...

Line

Line – without stacking

line_chart The same code as for “area” chart. Only different type “line”.

...
       chart: {
            type: 'line',
 ...

Pie

pie_chart
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Company projects',
            x: -50
        },
        plotOptions: {
            series: {
                dataLabels: {
                    format: '{point.name} ({point.y:,.0f})'
                }
            }
        },
        series: [{
            data: [
                ['Our proposal sent',   156],
                ['Tender already in progres',       66],
                ['We won tender', 38],
                ['Project in development',    18],
                ['Project finished', 9],
                ['Product accepeted',    7],
                ['Payed',5]
                ]
        }]
    });
});

Pyramid

pyramid_chart The same code as by “pie” chart. Only different type “pyramid” and I added marginRight to narrow picture.If you fiddle with chart.type.marginRight value pyramid will becomme narrower or wider.Also title is different.

...
chart: {
    type: 'pyramid',
    marginRight: 300
},
title: {
text: 'Pyramid of company projects',
...

Categorised as: Uncategorized


Comments are closed.