Charts.css

# Mixed

Mixed charts display a combination of two or more different chart types on top of one another.

# Usage

To display mixed charts, 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 this, below are 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 placing them on top of each other is 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;
  background-color: #f6f6ff;
}
#my-stock-chart .area,
#my-stock-chart .line,
#my-stock-chart .column {
  position: absolute;
  inset: 0;
}
#my-stock-chart .column {
  --aspect-ratio: 12 / 1;
}
#my-stock-chart .column tbody {
  margin-block-start: auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Stock price
Trend Line
Stock trade volume
Open in:

# Using CSS Grid

The same result can be achieved with CSS grid. The folowing example also includes 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 .area,
#my-chart .line {
  grid-area: stocks;
}
#my-chart .column {
  --aspect-ratio: 12 / 1;
  grid-area: volume;
}
#my-chart .column tbody {
  margin-block-start: auto;
}
#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
31
32
33
34
Stock Price
Trend Line
Stock trade volume
Primary Axis Title
Stock Price
Moving Average
Open in:

← Customization →