diff --git a/README.md b/README.md index 489a9f8..795156b 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,49 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati +### Stacked Column chart + +```html +
+ +
+``` + +
+ +
+ ### Bar chart ```html @@ -64,6 +107,38 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati +### Stacked Bar chart + +```html +
+ +
+``` + +
+ +
+ ### Scatter plot ```html @@ -88,7 +163,6 @@ Alternatively `cssplot.base.css` can be used alone with the following modificati ## Conceptions - [ ] Pie chart -- [ ] Stacked bar chart - [ ] Line chart - [ ] Axis/scale support - [ ] Live demo diff --git a/build/cssplot.base.css b/build/cssplot.base.css index 04b7093..fa16d7a 100644 --- a/build/cssplot.base.css +++ b/build/cssplot.base.css @@ -7,6 +7,10 @@ padding: 0; margin: 0; } +.plot-container li { + list-style: none; + border: 1px solid #ffffff; +} .column-chart .plot-container { display: -webkit-flex; display: flex; @@ -24,8 +28,24 @@ margin: 0; min-height: 100px; } +.column-chart.stacked li { + height: 100%; + -webkit-transform: scaleY(-1); + -moz-transform: scaleY(-1); + -o-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); +} +.column-chart.stacked .group-by-number [data-cp-size] { + -webkit-transform: scaleY(-1); + -moz-transform: scaleY(-1); + -o-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); +} .column-chart .chart-column, -.column-chart [data-cp-size] { +.column-chart [data-cp-size], +.column-chart.stacked li { -webkit-flex-grow: 1; flex-grow: 1; -webkit-align-self: flex-end; @@ -37,8 +57,6 @@ .bar-chart [data-cp-size] { background: #3498db; color: #ffffff; - list-style: none; - border: 1px solid #ffffff; box-sizing: border-box; } .bar-chart { @@ -54,6 +72,12 @@ .bar-chart [data-cp-size] { min-height: 8px; } +.bar-chart.stacked li { + display: flex; +} +.bar-chart.stacked .group-by-number [data-cp-size] { + display: inline-block; +} .scatter-plot .plot-container { position: absolute; top: 12px; diff --git a/build/cssplot.full.css b/build/cssplot.full.css index 40d1bb4..5445b48 100644 --- a/build/cssplot.full.css +++ b/build/cssplot.full.css @@ -7,6 +7,10 @@ padding: 0; margin: 0; } +.plot-container li { + list-style: none; + border: 1px solid #ffffff; +} .column-chart .plot-container { display: -webkit-flex; display: flex; @@ -24,8 +28,24 @@ margin: 0; min-height: 100px; } +.column-chart.stacked li { + height: 100%; + -webkit-transform: scaleY(-1); + -moz-transform: scaleY(-1); + -o-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); +} +.column-chart.stacked .group-by-number [data-cp-size] { + -webkit-transform: scaleY(-1); + -moz-transform: scaleY(-1); + -o-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); +} .column-chart .chart-column, -.column-chart [data-cp-size] { +.column-chart [data-cp-size], +.column-chart.stacked li { -webkit-flex-grow: 1; flex-grow: 1; -webkit-align-self: flex-end; @@ -37,8 +57,6 @@ .bar-chart [data-cp-size] { background: #3498db; color: #ffffff; - list-style: none; - border: 1px solid #ffffff; box-sizing: border-box; } .bar-chart { @@ -54,6 +72,12 @@ .bar-chart [data-cp-size] { min-height: 8px; } +.bar-chart.stacked li { + display: flex; +} +.bar-chart.stacked .group-by-number [data-cp-size] { + display: inline-block; +} .scatter-plot .plot-container { position: absolute; top: 12px; diff --git a/docs/images/cssplot_stacked_bar_chart.png b/docs/images/cssplot_stacked_bar_chart.png new file mode 100644 index 0000000..8dd290a Binary files /dev/null and b/docs/images/cssplot_stacked_bar_chart.png differ diff --git a/docs/images/cssplot_stacked_column_chart.png b/docs/images/cssplot_stacked_column_chart.png new file mode 100644 index 0000000..3350bc1 Binary files /dev/null and b/docs/images/cssplot_stacked_column_chart.png differ diff --git a/src/modules/base.less b/src/modules/base.less index 330008f..3c96d8a 100644 --- a/src/modules/base.less +++ b/src/modules/base.less @@ -6,6 +6,11 @@ margin: 0; } +.plot-container li { + list-style: none; + border: 1px solid #ffffff; +} + .column-chart .plot-container { display: -webkit-flex; display: flex; @@ -21,8 +26,26 @@ min-height: 100px; } +.column-chart.stacked li { + height: 100%; + -webkit-transform: scaleY(-1); + -moz-transform: scaleY(-1); + -o-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); +} + +.column-chart.stacked .group-by-number [data-cp-size] { + -webkit-transform: scaleY(-1); + -moz-transform: scaleY(-1); + -o-transform: scaleY(-1); + -ms-transform: scaleY(-1); + transform: scaleY(-1); +} + .column-chart .chart-column, -.column-chart [data-cp-size] { +.column-chart [data-cp-size], +.column-chart.stacked li { -webkit-flex-grow: 1; flex-grow: 1; -webkit-align-self: flex-end; @@ -35,8 +58,6 @@ .bar-chart [data-cp-size] { background: @chart-primary-color; color: @chart-primary-label-color; - list-style: none; - border: 1px solid @chart-primary-border-color; box-sizing: border-box; } @@ -56,6 +77,14 @@ min-height: 8px; } +.bar-chart.stacked li { + display: flex; +} + +.bar-chart.stacked .group-by-number [data-cp-size] { + display: inline-block; +} + .scatter-plot .plot-container { position: absolute; top: e(%("%dpx", @scatter-plot-dot-size * 2));