Overview

An overview of the chart type system and how they are specified.

Introduction

Chart types are constructed using several settings. Among them, the most significant are:

• Chart Type
• Series Type
• Axis Scale

The most fundamental property, chart.type, determines the generic layout of series. It can be set with these predefined settings: chartType enum. Axis scales further contribute to how elements are laid out, i.e. (Stacked). The series type determines how the series are visualized (line, bar, etc.). These properties work in concert to provide flexibility in setting up specific chart types.

Chart Type Settings

JSC has a very powerful and flexible chart type setting mechanism. It allows expressing data in different arrangements of chart types in a simplified way. The functionality of chart type settings is based on Enum chaining, and it's recommended to read this short intro to get the basic idea.

Definitions

• Chart
  A visualization of multiple data series. The data a chart can show is also known as a series collection.
• Series
  A collection of data points.
• Chart Type
  Specifies how multiple series are arranged together to form a visual.
• Series Type
  Specifies how a set of data points is visualized on a chart.

Chart Type

The chart types enum provides the root options for this setting. However, since default values don't have to be specified, the series type can be set at this level as well. For instance:

{
  type: "line step"
}

Which is the equivalent of:

{
  type: "vertical line step"
}

This option defines a chart type, a series type, and the line series type specific option step.

Series Types

The most important contributor to chart types is the series.type property. It can be set with these predefined settings: seriesType enum.

Each series can have a different series type setting.

{
  series: [
    {
      type: "line step"
    }
  ]
}

A series type can also be applied to all series in the chart by setting it for the defaultSeries like so:

{
  defaultSeries: {
    type: "line step"
  }
}

Chart Type v.s. Default Series Type

A series type property can also be set with a chart type value. This implies that the series should be treated as a chart or series collection itself. For example, the type of a vertical line chart with a number of series is 'Vertical'. But if one of those series should be a pie, it can be accomplished by setting 'pie' for that series' type property. Since pie is a chart type, this series is removed from the vertical X Y axis chart area, and shown as its own pie chart.

If 'pie' was set for the chart type property, all the series would be combined into a single pie.

{
  type: "pie"
}

If pie is applied to default series type, this indicates that each series becomes its own pie producing a number of pies.

{
  defaultSeries: {
    type: "pie"
  }
}

The first setting implies that this chart or series collection is a pie and results single pie. The second sitting implies that each series is a pie and results in a pie for each series.

More complex scenarios

Single Pie

Consider a chart with 4 series. The following code creates a chart with a single pie:

{
  type: "pie" //The main chart type is a pie
}

Multiple Pies

Consider a chart with 4 series. The following code creates a chart with four pies:

{
  defaultSeries_type: "pie" //The main chart type for each series a pie
}

Mixed Pies

Consider a chart with 4 series. The goal is to achieve a complex result where the first 3 series are represented by slices on a single pie. And the fourth series is a pie with slices for each point. This can be achieved with the following setting:

{
  type: "pie", //The main chart type is a pie
  series: [
    {},
    {},
    {},
    {
      type: "pie" //Chart type for the fourth series.
    }
  ]
}

Marker Types

Series types line, area, marker, and other types display markers on data points by default using the point.marker.type setting. It can be set with these predefined options: markerTypes enum. Marker types also affect the chart type to some degree as they control the shape of the point visuals.

Axis Scales

Further customization is achieved by specifying the yAxis.scale property. It can be set with these predefined settings: scale enum. Besides controlling the quantitative scale type, scales also dictate how series are arranged. For example an axis scale can specify that columns are stacked, or fullStacked.