Custom CSS

Many charting libraries make internal decisions on visual aesthetics, which may remove control from the designer, who may or may not understand JavaScript let alone the charting API. Choices on visual design like series colors and font sizes are best made in CSS. d4 exposes convenient hooks in the generated markup to allow visual designer to get precise control over the look and feel without needing deep knowledge of d4.

In this example we want a column chart where negative and positive column series are colored differently. This is easily accomplished using CSS, because by default the d4 column series will append either .positive or .negative depending on the value of the series.


CSS Code

  /* Style for our positive or negative column series */
  .d4 .bar.negative.fill {
      fill: darkred;
  }
  .d4 .bar.positive.fill {
      fill: steelblue;
  }

JavaScript Code