# 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"> ... </table>
<table class="charts-css"> ... </table>
<table class="charts-css"> ... </table>
</div>
2
3
4
5
6
7
8
9
The next step is to place them on top of each other using CSS. There are several ways to do that we will show two methods.
# 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 some kind of trend line.
# Using CSS Position
The first method to place them on top of each other using CSS position:
<div id="my-stock-chart">
<table class="charts-css area"> ... </table>
<table class="charts-css line"> ... </table>
<table class="charts-css column"> ... </table>
</div>
2
3
4
5
6
7
8
9
#my-stock-chart {
position: relative;
height: 250px;
width: 100%;
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;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Using CSS Grid
The same result can be achieved with CSS grid. And also include axis titles.
<div id="my-stock-chart">
<table class="charts-css area"> ... </table>
<table class="charts-css line"> ... </table>
<table class="charts-css column"> ... </table>
<div class="primary-axis"> Primary Axis Title </div>
<div class="data-1-axis"> Data-1 Axis Title </div>
<div class="data-2-axis"> Data-2 Axis Title </div>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#my-chart {
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 50px 1fr 50px;
grid-template-rows: 250px 50px;
grid-template-areas:
"data-1-axis stocks data-2-axis"
"data-1-axis volume data-2-axis"
"primary-axis primary-axis primary-axis";
}
#my-chart > table.area,
#my-chart > table.line {
grid-area: stocks;
}
#my-chart > table.column {
grid-area: volume;
}
#my-chart > .primary-axis {
grid-area: primary-axis;
}
#my-chart > .data-1-axis {
grid-area: data-1-axis;
writing-mode: tb-rl;
transform: rotateZ(180deg);
}
#my-chart > .data-2-axis {
grid-area: data-2-axis;
writing-mode: tb-rl;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
← Radar Customization →