Provide theme style using different CSS

[netil]

Description

Aside of the default CSS style, providing different look based on theme style will be useful.
Just changing the load of these files can make chart to render to have different style.

<!-- default css -->
<link rel="stylesheet" href="$YOUR_PATH/billboard.css">

<!-- ex: replace the default to use other theme css file -->
<link rel="stylesheet" href="$YOUR_PATH/theme/lighter.css">

[Rincewind3d]

A much better solution for theming would be the usage of CSS Custom Properties:

CSS Custom Properties allows you to theme at the runtime!

Example

// global theme
:host {
  --bb-grild-line-stroke: red;
}

// style a spefic chart
.myChart {
  --bb-grild-line-stroke: yellow;
}

Implementation (billboard.css):

.bb-grid line {
  stroke: #aaa; //IE11 Fallback
  stroke: var(--bb-grild-line-stroke, #aaa); }

The only downside of the solution is that IE11 does not support this kind of theming.

[netil]

@Hanterdro thanks for the suggestion.
That will be one of the alternatives, but it should cover IE11 too. It can be considered when IE11 usage degrade on meaningless level.

[Rincewind3d]

@netil
I would suggest that you add CSS custom properties to the default theme, additional to the option for a custom theme.css file path as you described above.

In my example you see how to add css custom properties with fallback values for IE11.

If a user of billboard.js don’t need IE11 theming he could use the original theme.css with the custom properties. If he need IE11 theme support he just use the theme path.

Adding CSS custom properties is not much work and brings a lot of value without any disadvantages.

[netil]

Screenshot of each Themes

• In order of
  default → insight → graph → datalab

Color patterns

Axis, Legend & Tooltip

Data Point & Grid

Pie

[msteller-connyun]

Btw... IE 11 is dead, after there’s now Edge for Win7.

So maybe it’s now time to support CSS Custom Properties ;)