# Customization

One of the key features in Charts.CSS is the ability to customize the visibility using basic CSS. Frontend developers can target any HTML element and customize it. This philosophical guideline is what makes the framework so flexible and easy to use.

# Custom Styling

To add your custom CSS simply add an id attribute to the <table> tag:

<table id="my-chart" class="charts-css bar|column|area|line ...">
  ...
</table>
1
2
3
#my-chart {
  ...
}
1
2
3

Or add an id attribute to a wrapper element:

<div id="my-chart">

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

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

</div>
1
2
3
4
5
6
7
8
9
#my-chart > table {
  ...
}
1
2
3

# Best Practice

It's recommend to add the chart type to your selector. This way the custom style will apply only on that specific chart type and not all the types.

/* Customize only bar charts */
#my-chart.bar {
  ...
}

/* Customize only pie charts */
#my-chart.pie {
  ...
}
1
2
3
4
5
6
7
8
9

Why is this important? because each chart type has its own structure and layout. You don't want unexpected side-effects when switching between charts types.

# Basic Examples

There are many ways you can customize the framework. We prepared some basic examples to get you started, separated into 3 topics.

You have a new beautiful design? Create a codepen and share with the community!