# Migrate to v1.0

This guide covers notable changes and breaking changes introduced in Charts.css version 1.0. It will help you migrate from version 0.x to 1.x.

# Notable Changes

New:

New chart type - Pie chart.
New aspect-ratio for charts.
New orientation utility classes to reverse labels.
New utility classes to align labels.
New utility classes to position data.
New CSS variables to style legends.
New --end CSS variable.
New @property types added to all CSS variables.
New SCSS prefix added to all CSS variables.
Fix legend colors to make them repeat after the basic 10 colors.
Fix axes by replace hardcoded SASS division with CSS calc().

Removals:

--heading-size variable was removed.
labels-align-start class was replaced with labels-align-{block|inline}-start.
labels-align-center class was replaced with labels-align-{block|inline}-center.
labels-align-end class was replaced with labels-align-{block|inline}-end.

Best Practices:

Prefer styling with a wrapper element.
Custom chart height is no longer required.

# Wrapper

Previously, you could either apply custom id attributes on a <table> element:

<table class="charts-css bar ..." id="my-chart">
  ...
</table>

1
2
3

Or, on a wrapping <div>:

<div id="my-chart">

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

</div>

1
2
3
4
5
6
7

You can still do that, but as of this release it's no longer recommended.

All the docs have been updated to recommend using a wrapper <div> with custom id attribute. This change makes it easier to add new inner elements like the legend, axes titles, multiple mixed charts etc.

We strongly recommend adding wrapper elements when migrating from version 0.x to 1.x.

# Chart Height

Breaking change! Previously, when serving an empty <td> or utilizing the hide-data / show-data-on-hover utility classes, the chart had no height. To overcome this issue, you had to set a custom style containing a minimum height value. It's no longer required.

- #my-chart .column {
-   height: 200px;
- }

1
2
3

# Aspect Ratio

Breaking change! Version 1.0.0 uses aspect-ratio on <tbody> element, making sure the chart always has a height even when you don't set a height. This change sets a proportional height based on the chart width.

The change has the potential to change the height of existing charts. When migrating from 0.x to 1.x versions, if the chart height is changed when you remove the height property, use aspect-ratio instead:

#my-chart .column tbody {
  aspect-ratio: 21 / 9;
}

1
2
3

In version 1.1.0 and above, the --aspect-ratio variable was added to simplify chart styling with CSS variables:

#my-chart .column {
  --aspect-ratio: 21 / 9;
}

1
2
3

Note that each chart type has a different aspect ratio.

# Heading Size

Previously, when you had a long text inside the <caption>, the text and the chart were overlapping. To fix this visual issue, you could increase the size of the heading with the --heading-size variable, and tweak the size for each media query. It's no longer required.

As of this release, the size of the heading text fits to the content, without any external workarounds. When migrating to version 1.x, remove all the --heading-size variables from your chart customizations. This variable has been removed from Charts.css.

- #my-chart .column {
-   --heading-size: 3rem;
- }

1
2
3

# Reverse Labels

Previously, there were three orientation utility classes for reversing the order of different elements inside the chart - reverse, reverse-data and reverse-dataset.

As of this release, a fourth orientation class was added, the reverse-labels class. This class allows you to position the labels on the other side. Charts with reversed labels position the label where the data ends, rather where the data starts.

<div id="my-chart">

  <table class="charts-css column reverse-labels ...">
    ...
  </table>

</div>

1
2
3
4
5
6
7

With this feature you can create Population Pyramid charts. It can be achieved by positioning side-by-side two bar charts with reversed labels.

Male population
Age	Population
85+	1.0%
75-84	2.0%
65-74	3.7%
55-64	4.2%
45-54	5.4%
35-44	6.2%
25-34	6.5%
15-24	7.4%
5-14	8.9%
0-4	4.8%

Female population
Age	Population
85+	0.7%
75-84	1.6%
65-74	3.2%
55-64	4.0%
45-54	5.3%
35-44	6.4%
25-34	6.7%
15-24	7.7%
5-14	9.4%
0-4	5.0%

Open in:

# Pie Chart

Version 1.0.0 also introduced Pie charts, streamline the process of converting data tables to an additional chart type using a simple CSS utility class. This is the first circular chart introduced by Charts.css.

Pie Chart
10
10
10
10
10
10
10
10
10
10

Open in:

# Labels Position

Previously, all labels were aligned to the center of the <th> element. As of this release, the labels are aligned to the beginning of the row in bar charts and to the bottom of the column on column, area and line charts.

To control the position alignment of the label, you get more possibilities.

Deprecated classes:

labels-align-start
labels-align-center
labels-align-end

New classes:

labels-align-inline-start
labels-align-inline-center
labels-align-inline-end
labels-align-block-start
labels-align-block-center
labels-align-block-end

# Data Position

Previously you couldn't control where the data will be displayed. It was fixed at the end of the row. Version 1.0.0 introduces additional CSS utility classes and variables that help you customize the position of your data.

New classes:

data-start
data-center
data-end
data-outside

New variables:

--data-position: start;
--data-position: end;
--data-position: center;

Edge Cases:

When you have a very low or a very heigh value on your bar and column charts, the data seems out of position. Version 1.0.0 introduces new utility classes added either to the <td> element or to the <span> element wrapping the data. The new classes are:

inside
outside

← Anatomy Components →