# 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>
1
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>
1
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Stock price
Trend Line
Stock trade volume
Open in:

# 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>
1
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;
}
1
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
Stock Price
Trend Line
Stock trade volume
Primary Axis Title
Stock Price
Moving Average
Open in: