Mixing in a new feature

When creating charts in d4 you have two paths you can take. You can either write your chart from scratch where you choose all the features you will need, or use a preexisting chart and mix-in features you want.

In this example we want a reference line to run horizontally across the chart exactly where the zero line occurs. This is very useful in instances where you want to clearly delineate positive and negative series. Unfortunately, the column chart doesn't come with any reference line by default. This is no problem though, we'll just mix one in!

d4's mixin function expects an object which consists of the following object structure:


      // Unique name for the feature
      'name' : 'someName',

      // Pointer to the d4 feature to be mixed in
      'feature' : d4.features.someFeature

      // Optional index which specifies a specific layer to mix the feature into
      index: 0

CSS File

  /* Style for our reference line */
  .d4 .zeroLine line {
      stroke: black;
      stroke-linecap: round;
JavaScript Code