Charts.css

# Pie

Pie charts display raw data as radial slices in a circle.

# Usage

To visualize your data with a pie chart, the main .charts-css class should be followed by the .pie class.

<table class="charts-css pie">
  ...
</table>
1
2
3

# Wrapper

It's recommended to wrap the chart with a wrapper element. This element is used not only to hold the chart components, but also for scoping the styles.

<div id="my-chart">

  <table class="charts-css pie">
    ...
  </table>

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

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

To set the chart dimensions, add some CSS:

#my-chart {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
#my-chart .pie {
  ...
}
#my-chart .legend {
  ...
}
1
2
3
4
5
6
7
8
9
10
11

# Heading

Add a heading to your chart using the <caption> tag. By default, the heading is hidden. To display the heading use the .show-heading class.

<div id="my-chart">

  <table class="charts-css pie show-heading">
    <caption> Descriptive Pie Chart Heading </caption>
    ...
  </table>

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

# Data

To transform HTML tables into charts, you need to provide data. The chart requires unitless numbers, between 0 to 1.


 


<tr>
  <td> $ 40K </td>
</tr>
1
2
3

Use the --start and --end variables to set the data. While --end is equivalent to --size in other chart types, --start indicates the starting point.


 


<tr>
  <td style="--start: 0.2; --end: 0.4;"> $ 40K </td>
</tr>
1
2
3

To help the framework identify the text, wrap the content with a <span class="data"> tag.


 


<tr>
  <td style="--start: 0.2; --end: 0.4;"> <span class="data"> $ 40K </span> </td>
</tr>
1
2
3
Pie Example #1
$ 10K
$ 5K
$ 15K
$ 55K
$ 15K
Open in:

# Axes

Control the axes displayed on the chart.

# Primary Axis

To add a primary axis, separating the labels from the data, use the .show-primary-axis class.

<table class="charts-css pie show-primary-axis">
  ...
</table>
1
2
3
Pie Example #2
Year Progress
2016 $ 10K
2017 $ 5K
2018 $ 15K
2019 $ 55K
2020 $ 15K
Open in:
Pie Example #3
Year Progress
2016 $ 10K
2017 $ 5K
2018 $ 15K
2019 $ 55K
2020 $ 15K
Open in:

# Secondary Axes

To add secondary axes, located behind the chart data, use the .show-*-secondary-axes class. Use the .show-*-secondary-axes class. Replace the * in the class name, with any number 1-10. For example, to display four axes use the .show-4-secondary-axes class.

<table class="charts-css pie show-4-secondary-axes">
  ...
</table>
1
2
3
Pie Example #4
Year Progress
2016 $ 10K
2017 $ 5K
2018 $ 15K
2019 $ 55K
2020 $ 15K
Open in:
Pie Example #5
Year Progress
2016 $ 10K
2017 $ 5K
2018 $ 15K
2019 $ 55K
2020 $ 15K
Open in:

← Radial →