ChartsCSS.org

Bar Chart

Regular

Reverse

Single

Years Compared
Year Progress
2016 20 data: 20
more info
2017 40 data: 40
more info
2018 60 data: 60
more info
2019 80 data: 80
more info
2020 100 data: 100
more info
Years Compared
Year Progress
2016 20 data: 20
more info
2017 40 data: 40
more info
2018 60 data: 60
more info
2019 80 data: 80
more info
2020 100 data: 100
more info

Single & Reverse Data

Years Compared
Year Progress
2016 20 data: 20
more info
2017 40 data: 40
more info
2018 60 data: 60
more info
2019 80 data: 80
more info
2020 100 data: 100
more info
Years Compared
Year Progress
2016 20 data: 20
more info
2017 40 data: 40
more info
2018 60 data: 60
more info
2019 80 data: 80
more info
2020 100 data: 100
more info

Multiple

Years Compared
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Years Compared
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100

Multiple & Reverse Data & Reverse Dataset

Years Compared
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Years Compared
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100

Stacked

House Spending by Countries
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
House Spending by Countries
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%

Stacked & Reverse Dataset

House Spending by Countries
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
House Spending by Countries
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%

Column Chart

Regular

Reverse

Single

Years Compared
Year Progress
2016 20 data: 20
more info
2017 40 data: 40
more info
2018 60 data: 60
more info
2019 80 data: 80
more info
2020 100 data: 100
more info
Years Compared
Year Progress
2016 20 data: 20
more info
2017 40 data: 40
more info
2018 60 data: 60
more info
2019 80 data: 80
more info
2020 100 data: 100
more info

Single & Reverse Data

Years Compared
Year Progress
2016 20 data: 20
more info
2017 40 data: 40
more info
2018 60 data: 60
more info
2019 80 data: 80
more info
2020 100 data: 100
more info
Years Compared
Year Progress
2016 20 data: 20
more info
2017 40 data: 40
more info
2018 60 data: 60
more info
2019 80 data: 80
more info
2020 100 data: 100
more info

Multiple

Years Compared
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Years Compared
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100

Multiple & Reverse Data + Datasets

Years Compared
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Years Compared
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100

Stacked

House Spending by Countries
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
House Spending by Countries
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%

Stacked & Reverse Datasets

House Spending by Countries
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
House Spending by Countries
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%

Area Chart

Regular

Reverse

Single

Years Compared
# Progress
1 40
2 80
3 60
4 100
6 30
Years Compared
# Progress
1 40
2 80
3 60
4 100
5 30

Single & Reverse Data

Years Compared
# Progress
2016 40
2017 80
2018 60
2019 100
2020 30
Years Compared
Year Progress
2016 40
2017 80
2018 60
2019 100
2020 30

Multiple

Years Compared
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Years Compared
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Multiple & Reverse Data + Datasets

Years Compared
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Years Compared
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Line Chart

Regular

Reverse

Single

Years Compared
# Progress
1 40
2 80
3 60
4 100
6 30
Years Compared
# Progress
1 40
2 80
3 60
4 100
6 30

Single & Reverse Data

Years Compared
# Progress
2016 40
2017 80
2018 60
2019 100
2020 30
Years Compared
Year Progress
2016 40
2017 80
2018 60
2019 100
2020 30

Multiple

Years Compared
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Years Compared
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Multiple & Reverse Data + Datasets

Years Compared
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Years Compared
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Radial Chart

Single Dataset

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Axes

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Axes & Reverse Data

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Axes & Reverse Data & ???

Pie Chart

Single Dataset

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Axes

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Axes & Reverse Data

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Axes & Reverse Data & ???

Donut Chart

Empty

With Data

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Polar Chart

Empty

With Data

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Radar Chart

Empty

With Data

Years Compared
Year Progress
2020 10
2019 25
2018 20
2017 15
2016 5
2015 15
2014 82

Chart Legend

Block Align

.legend

  • CSS
  • HTML

Inline Align

.legend.legend-inline

  • CSS
  • HTML
  • JS
  • SQL
  • PHP
  • JAVA
  • PYTHON

Circle

.legend.legend-circle

  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Violet
  • Ivory
  • Grey
  • Tan
  • Brown

Ellipse

.legend.legend-ellipse

  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Violet
  • Ivory
  • Grey
  • Tan
  • Brown

Square

.legend.legend-square

  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Violet
  • Ivory
  • Grey
  • Tan
  • Brown

Rectangle

.legend.legend-rectangle

  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Violet
  • Ivory
  • Grey
  • Tan
  • Brown

Rhombus

.legend.legend-rhombus

  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Violet
  • Ivory
  • Grey
  • Tan
  • Brown

Line

.legend.legend-line

  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Violet
  • Ivory
  • Grey
  • Tan
  • Brown