Code Expansion

The code expansion feature helps reduce the amount of code required to configure your desired chart settings. This tutorial explains how chart options can be written more efficiently by using the shortcuts afforded by code expansion.

JS configuration settings used by the chart follow an object-oriented API to define settings that span a hierarchy of logical chart objects. For example an axis tick label can be set by using the following:

{
  yAxis: {
    defaultTick: {
      label: {
        text: "%value"
      }
    }
  }
}

This setting is defined deep within the hierarchy and is a fairly standard approach in such a scenario. JSCharting however provides a mechanism that makes applying such settings simpler. This is achieved by using a single property setting that concatenates all subsequent properties into one name and is used at the root level like so:

{
  yAxis_defaultTick_label_text: "%value"
}

This setting will be evaluated by the chart into the fully expanded code shown above.

Caveats

Due to this approach, it is possible to define the same property multiple times. For example the following code specifies the same setting twice:

{
  label: { text: "textA" },
  label_text: "textB"
}

In this instance, the more expanded property takes precedence and overwrites the aliased version. Running this configuration through the chart will result in the following setting:

{
  label: { text: "textA" }
}

When label_text is expanded into label.text, and this value is already defined, it will be ignored.