Series and Items CSS

d4 aims to make styling the charts using CSS as robust as possible. Towards that end, d4 adds several generated CSS classes to various elements of the chart as it renders. This page gives several examples of how you can radically alter the visual intent of the chart by utilizing the various classes available to you. The important take away here is that controlling the series colors changes the story your charts are telling. You will want to choose the correct visual representation of your series data to support the point you are trying to make.

The first example uses the auto-incrementing .item class. As items are added to the chart a new item class will be added to the new series item e.g. .item0, .item1, .item2.

The second example uses the auto-incrementing .series class. As series are added to the chart a new series class will be created e.g. .series0, .series1, .series2.

The third example combines the auto-incrementing .series and .item classes together.


Item Example
Series Example
Series & Item Example
CSS

  #items .item0.fill {
      fill: #CD202C;
  }

  #items .item1.fill {
      fill: #D4BA00;
  }

  #items .item2.fill {
      fill: #A2AD00;
  }

  #items .item3.fill {
      fill: #E37222;
  }

  #series .series0 .fill {
      fill: #CD202C;
  }

  #series .series1 .fill {
      fill: #D4BA00;
  }

  #series .series2 .fill {
      fill: #A2AD00;
  }

  #series .series3 .fill {
      fill: #E37222;
  }
  #series .series4 .fill {
      fill: #AD005B;
  }

  #series-item .series0 .item0.fill {
      fill: #CD202C;
  }

  #series-item .series0 .item1.fill {
      fill: #D95760;
  }

  #series-item .series0 .item2.fill {
      fill: #E68F95;
  }

  #series-item .series1 .item0.fill {
      fill: #D4BA00;
  }

  #series-item .series1 .item1.fill {
      fill: #DECB3F;
  }

  #series-item .series1 .item2.fill {
      fill: #E9DC7F;
  }

  #series-item .series2 .item0.fill {
      fill: #A2AD00;
  }

  #series-item .series2 .item1.fill {
      fill: #B9C13F;
  }

  #series-item .series2 .item2.fill {
      fill: #D0D67F;
  }

  #series-item .series3 .item0.fill {
      fill: #E37222;
  }

  #series-item .series3 .item1.fill {
      fill: #EA9559;
  }

  #series-item .series3 .item2.fill {
      fill: #F1B890;
  }

  #series-item .series4 .item0.fill {
      fill: #AD005B;
  }

  #series-item .series4 .item1.fill {
      fill: #C13F84;
  }

  #series-item .series4 .item2.fill {
      fill: #D67FAD;
  }
JavaScript Code