Charts.css

# 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

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

# 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
#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
Stock price
Trend Line
Stock trade volume
Open in:

← Customization →