v2.1.0
v2.1.0v2.0.0v1.2.0

Chart

Introduction

A chart is a graphical representation that helps a report reader observe data changes over periods, compare different data groups or parts of a whole, determine relationships between variables, etc.

In ActiveReportsJS, you can use the following chart types to design such data visualizations:

  • Column, Stacked Column, and Stacked Percentage Column
  • Bar, Stacked Bar, and Stacked Percentage Bar
  • Line, Smooth Line, and Stepped Line
  • Area, Stacked Area, and Stacked Percentage Area
  • Pie, Doughnut, and Circular Bar
  • Spiral, Stacked Spiral, and Stacked Percentage Spiral
  • Polar, Stacked Polar, and Stacked Percentage Polar
  • Funnel and Pyramid
  • Scatter and Bubble
  • Gannt
  • Candlestick, High Low Close, and High Low Open Close

A chart consists of multiple optional parts whose composition and configuration determine chart appearance in the report output. The following diagram depicts typical chart anatomy.

Chart Anatomy

Chart Designer

You can add a Chart into a report by either double-click on the corresponding item in the toolbox or drag-and-drop it to a report page area. We recommend using the report explorer to configure various chart parts, such as plot, axes, or legend. When you select a corresponding node in the explorer, its configuration becomes available in the Properties panel for modification.

Expand to watch adding chart and using report explorer in action

Adding and configuring

General Chart Configuration

If you click the root node of a chart report item, f.e. Chart1, the properties panel loads the general chart configuration. It exposes the Base Report Item properties, Common Style Properties, all the Data Region properties and the following specific properties

  • The Plots is the collection of chart plots.
  • The Palette is the pre-defined or custom collection of colors that plots use to paint shapes
  • The Custom Palette Colors is the use-defined colors collection for the Custom Palette.

Header and Footer items allow you to add a text that appears above and below the containing chart's plot area. Header and footer configuration exposes Common Style Properties, a subset of Text Properties, and the following specific properties.

  • The Caption is the String Expression that determines the text to display in the header or footer
  • The Height The Number in the percentage of the containing chart's height sets the Header or Footer height.

Plot Area

The plot area shows the plotted data and also contains the chart axes and legend. Plot Area configuration exposes Common Style Properties and the collection of axes.

Plot, Axes, and Legend

Use the links below to read about the configuration of other chart parts: