SlideShare uma empresa Scribd logo
1 de 20
Chart.css
Hello!
Jonathan Sedrez
Frontend | ilegra
2
CSS data visualization framework
3
Chart.css
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
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
Sem Javascript
7
Classes CSS
Bootstrap
Tailwind CSS Bulma
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
Data-Driven
Documents
HighCharts JS
Chart.js
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
Os dados brutos são
colocados no
documento coma tag
HTML <table>
11
Para exibir os dados
como um gráfico,
primeiro você precisa
adicionar a classe
.charts-css ao
elemento <table>:
12
● Wrapper
● Heading
● Data
● Datasets
● Orientation
● Labels
● Axes
13
● Spacing
● Reverse order
● Colors
● Stacked
● Tooltips
● Legend
Componentes
● Bar
● Column
● Area
● Line
● Pie
14
● Radar
● Mixed
● Donut
● Polar
● Mixed
Gráficos
15
16
17
Pros
18
Cons
19
Obrigado!
Duvidas?
20

Mais conteúdo relacionado

Semelhante a Chart css

Case studies about Layout & View States & Scale in Windows 8 Store Apps
Case studies about Layout & View States & Scale in Windows 8 Store AppsCase studies about Layout & View States & Scale in Windows 8 Store Apps
Case studies about Layout & View States & Scale in Windows 8 Store Apps
Comunidade NetPonto
 
Apresentação Modelo de Gestão de dados para sistemas Colaborativos
Apresentação Modelo de Gestão de dados para sistemas ColaborativosApresentação Modelo de Gestão de dados para sistemas Colaborativos
Apresentação Modelo de Gestão de dados para sistemas Colaborativos
Mozart Dornelles Claret
 

Semelhante a Chart css (20)

Css tutorial
Css tutorialCss tutorial
Css tutorial
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + Less
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Html5
Html5Html5
Html5
 
Case studies about Layout & View States & Scale in Windows 8 Store Apps
Case studies about Layout & View States & Scale in Windows 8 Store AppsCase studies about Layout & View States & Scale in Windows 8 Store Apps
Case studies about Layout & View States & Scale in Windows 8 Store Apps
 
Facilitando sua vida com SASS
Facilitando sua vida com SASSFacilitando sua vida com SASS
Facilitando sua vida com SASS
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012
 
Desenvolvimento web com vs2012: Uma visão geral
Desenvolvimento web com vs2012: Uma visão geralDesenvolvimento web com vs2012: Uma visão geral
Desenvolvimento web com vs2012: Uma visão geral
 
Big Data, NoSQL e In Memory Databases
Big Data, NoSQL e In Memory DatabasesBig Data, NoSQL e In Memory Databases
Big Data, NoSQL e In Memory Databases
 
Pesquisa sobre no sql
Pesquisa sobre no sqlPesquisa sobre no sql
Pesquisa sobre no sql
 
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan VitorianoCSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
CSS in JS - Escrevendo CSS no JavaScript - Dan Vitoriano
 
Codificando .Net e SQL PASS Chapter - Novidades de BI para SQL Server 2012
Codificando .Net e SQL PASS Chapter - Novidades de BI para SQL Server 2012Codificando .Net e SQL PASS Chapter - Novidades de BI para SQL Server 2012
Codificando .Net e SQL PASS Chapter - Novidades de BI para SQL Server 2012
 
Apresentação
ApresentaçãoApresentação
Apresentação
 
Apresentação Modelo de Gestão de dados para sistemas Colaborativos
Apresentação Modelo de Gestão de dados para sistemas ColaborativosApresentação Modelo de Gestão de dados para sistemas Colaborativos
Apresentação Modelo de Gestão de dados para sistemas Colaborativos
 
CSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-seCSS: pare de usar frameworks e atualize-se
CSS: pare de usar frameworks e atualize-se
 
Entenda como as grandes empresas utilizam múltiplas abordagens de armazenamen...
Entenda como as grandes empresas utilizam múltiplas abordagens de armazenamen...Entenda como as grandes empresas utilizam múltiplas abordagens de armazenamen...
Entenda como as grandes empresas utilizam múltiplas abordagens de armazenamen...
 
Aula 4 e 5 css e java script
Aula 4 e 5   css e java scriptAula 4 e 5   css e java script
Aula 4 e 5 css e java script
 
Aula 1 programação web i
Aula 1   programação web iAula 1   programação web i
Aula 1 programação web i
 

Mais de Jonathan de Britto Sedrez

Mais de Jonathan de Britto Sedrez (15)

Typescript 4.1
Typescript 4.1Typescript 4.1
Typescript 4.1
 
Socket.io
Socket.ioSocket.io
Socket.io
 
RSocket
RSocketRSocket
RSocket
 
Rambda
RambdaRambda
Rambda
 
PWA
PWAPWA
PWA
 
OTA updates
OTA updatesOTA updates
OTA updates
 
OKRs
OKRsOKRs
OKRs
 
Jasmine
Jasmine Jasmine
Jasmine
 
Facebook flux
Facebook fluxFacebook flux
Facebook flux
 
Event bubbling
Event bubblingEvent bubbling
Event bubbling
 
EscmaScript
EscmaScriptEscmaScript
EscmaScript
 
Es2020
Es2020Es2020
Es2020
 
Enzyme js
Enzyme jsEnzyme js
Enzyme js
 
Cypress
CypressCypress
Cypress
 
Bff patterns
Bff patternsBff patterns
Bff patterns
 

Chart css