Charts.css

# Wrapper

A wrapper element includes the general HTML structure needed to turn raw data into a chart.

# General Anatomy

The full structure of a chart includes a wrapper <div> with inner components including the data <table> and the legend list.

<div id="my-chart">

  <table class="charts-css bar|column|area|line">
    ...
  </table>

  <ul class="charts-css legend">
    ...
  </ul>

</div>
1
2
3
4
5
6
7
8
9
10
11

Please note that only the <table> element is required. The wrapper elements and the legend are optional fields.

Type Field Element
Wrapper Element Optional Any
Chart Legend Optional <ul> / <ol>
Chart Data Required <table>

Although a wrapper div is not required, as of version 1.0.0 the new best practice is to add a wrapper element to all charts.

# Customizing the Wrapper

A simple customization will include custom width for the wrapper.

#my-chart {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
1
2
3
4
5

To customize chart components, use descendant combinators with the component selector.

#my-chart .legend {
  ...
}
#my-chart .bar,
#my-chart .column,
#my-chart .area,
#my-chart .line,
#my-chart .pie {
  ...
}
1
2
3
4
5
6
7
8
9
10

# Responsive Wrapper

Media queries can be used to set different dimensions for different screen sizes.

#my-chart {
  max-width: 600px;
}

@media (min-width: 600px) {
  #my-chart {
    max-width: 800px;
  }
}

@media (min-width: 1000px) {
  #my-chart {
    max-width: 1000px;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Alternatively, container queries can be used to style based on the size and layout of specific elements on the page. For example, you can position the legend and the chart side-by-side, and under a certain width to position them below each other.

#my-chart {
  container-name: chart;
  container-type: inline-size;
}

#my-chart {
  display: flex;
  flex-direction: row;
}

@container charts (max-width: 600px) {
  #my-chart {
    flex-direction: column;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Additional Elements

Add your own elements to the chart and style them accordingly.

<div id="my-chart">

  <table class="charts-css bar|column|area|line"> ... </table>

  <ul class="charts-css legend"> ... </ul>

  <div class="first-custom-element"> ... </div>

  <div class="second-custom-element"> ... </div>

</div>
1
2
3
4
5
6
7
8
9
10
11

For a concrete example, you can incorporate axes titles by utilizing custom HTML elements combined with CSS wizardry. More intricate scenarios could involve blending multiple charts in a single wrapper, positioning them one on top of the other using CSS.

← Heading →