CSS
Epoch charts use CSS to set fill colors, strokes, etc. By default charts are colored using d3 categorical color. You can easily override these default colors or create your own custom categories.
Themes
Epoch arranges like styles for charts in the form of themes. Themes can be added to any HTML container via special class names. Currently, Epoch ships with two built-in themes:
epoch-theme-default
- Default theme based on d3's categorical colorsepoch-theme-dark
- A theme for use with dark backgrounds
Here's an example of how to use the class names, it's pretty simple:
<body class="epoch-theme-dark">
Charts in the body will use the dark theme...
<div class="epoch-theme-default">Except charts here...</div>
</body>
Note: if no class name is given then epoch will assume the default theme.
Using Categorical Colors
Each theme supports four categorical color sets:
category20
(default)category20b
category20c
category10
You can change a chart's color set by simply adding a class to the chart, like so:
<div id="container1" class="epoch category20"></div>
<div id="container1" class="epoch category20b"></div>
<div id="container1" class="epoch category20c"></div>
<div id="container1" class="epoch category10"></div>
We achieve this by adding a category class to each element in a chart that needs to be rendered using the categorical color.
Creating Your Own Categories
The preferred method for doing this would be to use a css preprocessor like Sass or Less, here's an example of a simple color scheme as written in SCSS:
$colors: red, green, blue, pink, yellow;
.epoch.my-colors {
@for $i from 1 through 5 {
.category#{$i} {
.line { stroke: nth($colors, $i); }
.area, .dot { fill: nth($colors, $i); }
}
.arc.category#{$i} path {
fill: nth($colors, $i);
}
.bar.category#{$i} {
fill: nth($colors, $i);
}
}
}
You could then apply the class to your containers and see your colors in action:
<div id="myChart" class="epoch my-colors"></div>
In the future we will be creating SCSS and LESS plugins with mixins you can use to more easily define custom color categories.
Overriding Styles
For multi-series charts, the data format lets your supply an optional label
for each series. We create a "dasherized"
class name from this label and associate it with the rendered output of the chart. For instance, take the following
data for an area chart:
var areaChartData = [
{
label: "Layer 1",
values: [ {x: 0, y: 100}, {x: 20, y: 1000} ]
}
];
The layer labeled Layer 1
will be associated in the chart with the class name layer-1
. To override it's color simply
use the following CSS:
#myChartContainer .layer-1 .area {
fill: pink;
}