Overriding the default Chart rendering routine - colored rectangles

To change the way a Chart renders annotations, we need to override the default rendering routine by providing a callback function that will be assigned to the Chart’s inRender property. The callback function has two parameters:

• this: a reference to the Chart itself

• params: a reference to the RenderParams argument when render() is called

In the canonical SODA pattern, the inRender callback should be responsible for making calls to SODA’s glyph rendering API.

For example, the default Chart inRender callback is defined as:

let defaultInRender = function (
  this: soda.Chart<any>,
  params: soda.RenderParams
): void {
  soda.rectangle({
    chart: this,
    annotations: params.annotations || [],
  })
}

If we wanted to change the colors of our rectangles, we might define something like:

let customInRender = function (this, params): void {
  soda.rectangle({
    chart: this,
    annotations: params.annotations || [],
    fillColor: "cadetblue",
    strokeColor: "cadetblue",
  })
}

We can supply the callback on the ChartConfig:

let chart = new soda.Chart({
  selector: "#soda-chart",
  inRender: customInRender
});

Alternatively, we can set the Chart’s inRender property after instantiation:

let chart = new soda.Chart({
  selector: "#soda-chart"
});

chart.inRender = customInRender

Finally, here’s a full example that anonymously defines the inRender callback in the ChartConfig:

let chart = new soda.Chart({
  selector: "#soda-chart",
  axis: true,
  zoomable: true,
  inRender: function (this, params): void {
    soda.rectangle({
      chart: this,
      annotations: params.annotations || [],
      fillColor: "cadetblue",
      strokeColor: "cadetblue",
    })
  }
});

let ann: Soda.Annotation = soda.generateAnnotations({
  n: 10
})

chart.render({
  annotations: ann
})

---

See the Pen Colored rectangles by Jack Roddy (@jackroddy) on CodePen.