# Mixed
Mixed charts display a combination of two or more different chart types on top of each other.
# Usage
To display mixed charts we need to create multiple <table>
elements for each chart.
<div id="my-chart">
<table class="charts-css bar|column|area|line">
</table>
<table class="charts-css bar|column|area|line">
</table>
<table class="charts-css bar|column|area|line">
</table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
The next step is to place them on top of each other using CSS:
#my-chart {
position: relative;
}
#my-chart > table {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Stock Chart
Stock charts are very popular in the financial sector. To create a stock chart we will use a mix of charts - an area chart to display the stock price, a column chart to display the trade volume and a line chart to show a some kind of trend line.
<div id="my-stock-chart">
<table class="charts-css area">
</table>
<table class="charts-css line">
</table>
<table class="charts-css column data-spacing-2">
</table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
#my-stock-chart {
position: relative;
height: 250px;
max-width: 600px;
margin: 0 auto;
}
#my-stock-chart > table {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#my-stock-chart > table.column {
top: unset;
height: 35px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Open in:
← Radar Customization →