ChartsCSS.org

Visual regression tests for different charts

Bar Chart

Single

Chart Heading
(none)
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
Chart Heading
(reverse)
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
Chart Heading
(reverse-data)
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
Chart Heading
(reverse-data reverse)
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
Chart Heading
(reverse-labels)
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
Chart Heading
(reverse-labels reverse)
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
Chart Heading
(reverse-labels reverse-data)
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
Chart Heading
(reverse-labels reverse-data reverse)
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

Chart Heading
(none)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-data)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-data reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-datasets)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-datasets reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-data reverse-datasets)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-data reverse-datasets reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-labels)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-labels reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-labels reverse-data)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-labels reverse-data reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-labels reverse-datasets)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-labels reverse-datasets reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-labels reverse-data reverse-datasets)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-labels reverse-data reverse-datasets reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100

Stacked

Chart Heading
(none)
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
(reverse)
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
(reverse-datasets)
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
(reverse-datasets reverse)
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
(reverse-labels)
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
(reverse-labels reverse)
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
(reverse-labels reverse-datasets)
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
(reverse-labels reverse-datasets reverse)
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%

Column Chart

Single

Chart Heading
(none)
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
Chart Heading
(reverse)
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
Chart Heading
(reverse-data)
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
Chart Heading
(reverse-data reverse)
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
Chart Heading
(reverse-labels)
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
Chart Heading
(reverse-labels reverse)
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
Chart Heading
(reverse-labels reverse-data)
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
Chart Heading
(reverse-labels reverse-data reverse)
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

Chart Heading
(none)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-data)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-data reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-datasets)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-datasets reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-data reverse-datasets)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100
Chart Heading
(reverse-data reverse-datasets reverse)
Year Progress 1 Progress 2 Progress 3 Progress 4 Progress 5
2000 20 50 100 70 40
2020 20 40 60 80 100

Stacked

Chart Heading
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%
Chart Heading
Country Rent Food Other
USA 50% 30% 20%
Asia 30% 30% 30%
Europe 30% 30%

Area Chart

Regular

Reverse

Single

Chart Heading
# Progress
1 40 data: 40
more info
2 80 data: 80
more info
3 60 data: 60
more info
4 100 data: 100
more info
6 30 data: 30
more info
Chart Heading
# Progress
1 40
2 80
3 60
4 100
5 30

Single & Reverse Data

Chart Heading
# Progress
2016 40
2017 80
2018 60
2019 100
2020 30
Chart Heading
Year Progress
2016 40
2017 80
2018 60
2019 100
2020 30

Multiple

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Multiple & Reverse Data + Datasets

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Line Chart

Regular

Reverse

Single

Chart Heading
# Progress
1 40 data: 40
more info
2 80 data: 80
more info
3 60 data: 60
more info
4 100 data: 100
more info
6 30 data: 30
more info
Chart Heading
# Progress
1 40
2 80
3 60
4 100
6 30

Single & Reverse Data

Chart Heading
# Progress
2016 40
2017 80
2018 60
2019 100
2020 30
Chart Heading
Year Progress
2016 40
2017 80
2018 60
2019 100
2020 30

Multiple

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Multiple & Reverse Data + Datasets

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Radial Chart

Regular

Reverse

Single

Chart Heading
# Progress
1 40 data: 40
more info
2 80 data: 80
more info
3 60 data: 60
more info
4 100 data: 100
more info
6 30 data: 30
more info
Chart Heading
# Progress
1 40
2 80
3 60
4 100
6 30

Single & Reverse Data

Chart Heading
# Progress
2016 40
2017 80
2018 60
2019 100
2020 30
Chart Heading
Year Progress
2016 40
2017 80
2018 60
2019 100
2020 30

Multiple

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Multiple & Reverse Data + Datasets

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Pie Chart

Regular

Reverse

Single

Chart Heading
# Progress
1 10 data: 10
more info
2 30 data: 30
more info
3 20 data: 20
more info
4 10 data: 10
more info
6 30 data: 30
more info
Chart Heading
# Progress
1 10 data: 10
more info
2 30 data: 30
more info
3 20 data: 20
more info
4 10 data: 10
more info
6 30 data: 30
more info

Single & Reverse Data

Chart Heading
# Progress
1 10 data: 10
more info
2 30 data: 30
more info
3 20 data: 20
more info
4 10 data: 10
more info
6 30 data: 30
more info
Chart Heading
Year Progress
1 10 data: 10
more info
2 30 data: 30
more info
3 20 data: 20
more info
4 10 data: 10
more info
6 30 data: 30
more info

Multiple

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Multiple & Reverse Data + Datasets

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Polar Chart

Regular

Reverse

Single

Chart Heading
# Progress
1 40 data: 40
more info
2 80 data: 80
more info
3 60 data: 60
more info
4 100 data: 100
more info
6 30 data: 30
more info
Chart Heading
# Progress
1 40
2 80
3 60
4 100
6 30

Single & Reverse Data

Chart Heading
# Progress
2016 40
2017 80
2018 60
2019 100
2020 30
Chart Heading
Year Progress
2016 40
2017 80
2018 60
2019 100
2020 30

Multiple

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Multiple & Reverse Data + Datasets

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Radar Chart

Regular

Reverse

Single

Chart Heading
# Progress
1 40 data: 40
more info
2 80 data: 80
more info
3 60 data: 60
more info
4 100 data: 100
more info
6 30 data: 30
more info
Chart Heading
# Progress
1 40
2 80
3 60
4 100
6 30

Single & Reverse Data

Chart Heading
# Progress
2016 40
2017 80
2018 60
2019 100
2020 30
Chart Heading
Year Progress
2016 40
2017 80
2018 60
2019 100
2020 30

Multiple

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

Multiple & Reverse Data + Datasets

Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20
Chart Heading
Year Progress 1 Progress 2 Progress 3
2000 50 20 40
2010 80 50 10
2020 40 30 20

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