# 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

```\$(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

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

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

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

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

#### Bar – stacked 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

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

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

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

### Line

#### Line – without stacking

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

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

### Pie

```\$(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],
['We won tender', 38],
['Project in development',    18],
['Project finished', 9],
['Product accepeted',    7],
['Payed',5]
]
}]
});
});
```

### Pyramid

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