Chart.css é um framework CSS open source que permite criar gráficos e visualizações de dados acessíveis apenas utilizando HTML e CSS, sem a necessidade de JavaScript. Ele usa classes CSS para estilizar dados em tabelas HTML e gerar gráficos de barras, colunas, áreas, linhas, pizza e outros tipos de gráficos de forma responsiva. O framework oferece customização através de classes para componentes como wrappers, legendas e eixos.

1. Chart.css

2. Hello!
Jonathan Sedrez
Frontend | ilegra
2

3. CSS data visualization framework
3
Chart.css

4. Charts.css é um framework CSS. Ele usa classes de
CSS para definir o estilo no HTML e apresentar
gráficos para o usuário.
4

5. 5
Acessível
HTML & CSS Customizável
Open source Responsive Variedades
Usa tags HTML semânticas
Você pode alterar o código
Dados brutos Estilize os gráficos do seu jeito
Utiliza Media queries Muitos tipos de gráficos

6. 6
Sem Javascript

7. 7
Classes CSS
Bootstrap
Tailwind CSS Bulma

8. 8
Alternativas
A web oferece muitas bibliotecas de gráficos. Todos
eles usam JS para renderizar os dados. Cada um
implementa uma estratégia diferente, como VML, SVG,
canvas, geradores de imagem e outros métodos.

9. 9
Data-Driven
Documents
HighCharts JS
Chart.js

10. 10
Qual é o
melhor?
Não existe a melhor solução, tudo depende das suas necessidades e das
capacidades da solução que você escolher.
Quando devo
migrar?
Na maioria dos casos, você só precisa de um gráfico simples para exibir seus
dados. Nesses casos, não faz sentido carregar bibliotecas JS pesadas. Para
gráficos complexos com comportamentos especiais não abrangidos por
Charts.css, você deve pesquisar alternativas JS

11. Os dados brutos são
colocados no
documento coma tag
HTML <table>
11

12. Para exibir os dados
como um gráfico,
primeiro você precisa
adicionar a classe
.charts-css ao
elemento <table>:
12

13. ● Wrapper
● Heading
● Data
● Datasets
● Orientation
● Labels
● Axes
13
● Spacing
● Reverse order
● Colors
● Stacked
● Tooltips
● Legend
Componentes

14. ● Bar
● Column
● Area
● Line
● Pie
14
● Radar
● Mixed
● Donut
● Polar
● Mixed
Gráficos

15. 15

16. 16

17. 17

18. Pros
18

19. Cons
19

20. Obrigado!
Duvidas?
20