Code Expansion

Chart Tutorials  

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 despite being a bit complex, is a standard approach in such a scenario. JSCharting however provides a mechanism that makes applying such settings much easier. This is achieved by using a single property setting that concatenates all subsequent properties into one name and 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. JSCharting utilizes an API definition file that contains all the properties and related metadata to make this processing work for all available properties, perform well and without error. Minor spelling mistakes in property names can make libraries miss the property and cost time tracking down the issue. This processing allows the chart to validate the object property settings to ensure all intended settings are valid.

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 labelText is expanded into label.text, and this value is already defined, it will be ignored. When defining chart options to be used as a chart template. The chart expands both the chart configuration and template before the settings are merged. Therefore, this precedence does not influence use of templates. This feature is not recommended for use with typescript. Some properties such as xAxis and yAxis can be set with an axis object, or with an array of axis objects. If an array of axes is used and an aliased axis property is set, it may cause problems as it will not be expanded into one of the axis objects in the array but as a property of the array.