ChartsCSS.org
Chart Legend
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
Bar Chart
Single dataset
Months Compare
| # |
Month |
| January |
35 data: 35
asd |
| February |
80 data: 80
more info |
| March |
50 data: 80
more info |
| April |
100 data: 100
more info |
| May |
0 data: 0
more info |
| June |
45 data: 45
more info |
| July |
82 |
| August |
70 |
| September |
5 |
| October |
20 |
| November |
50 |
| December |
40 |
Multiple reverse
Countries Compare
| # |
Land Mass (million km^2) |
Population (billion) |
GDP (nominal) |
| USA |
17 |
0.3 |
21.4 |
| China |
9.6 |
1.4 |
14.1 |
| India |
3.2 |
1.3 |
2.9 |
| Russia |
17.1 |
0.1 |
1.6 |
Multiple labels-after
Countries Compare
| # |
Land Mass (million km^2) |
Population (billion) |
GDP (nominal) |
| USA |
17 |
0.3 |
21.4 |
| China |
9.6 |
1.4 |
14.1 |
| India |
3.2 |
1.3 |
2.9 |
| Russia |
17.1 |
0.1 |
1.6 |
| X |
. |
. |
. |
Stacked
House Spending by Countries
| Country |
Rent |
Food |
Other |
| USA |
30% |
20% |
50% |
| Asia |
40% |
30% |
30% |
| Europe |
40% |
40% |
Stacked Reverse
House Spending by Countries
| Country |
Rent |
Food |
Other |
| USA |
30% |
20% |
50% |
| Asia |
40% |
30% |
30% |
| Europe |
40% |
40% |
Stacked labels-after
House Spending by Countries
| Country |
Rent |
Food |
Other |
| USA |
30% |
20% |
50% |
| Asia |
40% |
30% |
30% |
| Europe |
40% |
40% |
Column Chart
Single dataset
Months Compare
| # |
Month |
| January |
35 data: 35
more info |
| February |
80 data: 80
more info |
| March |
50 data: 80
more info |
| April |
100 data: 100
more info |
| May |
0 data: 0
more info |
| June |
45 data: 45
more info |
| July |
82 |
| August |
70 |
| September |
5 |
| October |
20 |
| November |
50 |
| December |
40 |
Multiple reverse
Countries Compare
| # |
Land Mass (million km^2) |
Population (billion) |
GDP (nominal) |
| USA |
17 |
0.3 |
21.4 |
| China |
9.6 |
1.4 |
14.1 |
| India |
3.2 |
1.3 |
2.9 |
| Russia |
17.1 |
0.1 |
1.6 |
Multiple labels-before
Countries Compare
| # |
Land Mass (million km^2) |
Population (billion) |
GDP (nominal) |
| USA |
17 |
0.3 |
21.4 |
| China |
9.6 |
1.4 |
14.1 |
| India |
3.2 |
1.3 |
2.9 |
| Russia |
17.1 |
0.1 |
1.6 |
| X |
. |
. |
. |
Stacked
House Spending by Countries
| Country |
Rent |
Food |
Other |
| USA |
30% |
20% |
50% |
| Asia |
40% |
30% |
30% |
| Europe |
40% |
40% |
Stacked Reverse
House Spending by Countries
| Country |
Rent |
Food |
Other |
| USA |
30% |
20% |
50% |
| Asia |
40% |
30% |
30% |
| Europe |
40% |
40% |
Pie Chart
With data, no styling
- Cats
- Dogs
- Parrots
- Hamsters
- Fish
With data and styling
- Cats: 80
- Dogs: 60
- Parrots: 40
- Hamsters: 80
- Fish: 16
Donut Chart
With data, no styling
- Cats
- Dogs
- Parrots
- Hamsters
- Fish
With data and styling
- Cats: 22
- Dogs: 11
- Parrots: 33
- Hamsters: 22
- Fish: 22
Polar Chart
With data, no styling
- Cats
- Dogs
- Parrots
- Hamsters
- Fish
With data and styling
- Cats: 22
- Dogs: 11
- Parrots: 33
- Hamsters: 22
- Fish: 22