Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript Charts: Series

Chart series represent data sets to be plotted on a chart. Each series type (Line, Bar, Pie etc.) have series-specific options, but there are some common options between them.

Type

Every series configuration can specify a type to declare how the data set should be rendered:

series: [{
    type: 'pie',
}]

If unspecified, we default to the optional type specified for the chart. Failing that we default to 'line'.

Cartesian series types can be combined on the same chart. See the Options Reference for the complete list of available series types.

Data

By default each series is based on data from the root-level data option. It is also possible for each series to declare its own data:

series: [{
    data: [
        { name: 'Apples', count: 10 },
        { name: 'Oranges', count: 10 },
    ],
}]

The data should be an array of objects. Common options like xKey, yKey, angleKey specify the properties to use to read the data-set for the series.

See other available options in the API reference.

API Reference

Properties available on the AgBaseSeriesOptions<DatumType> interface.

id
string
Primary identifier for the series. This is provided as seriesId in user callbacks to differentiate multiple series. Auto-generated ids are subject to future change without warning, if your callbacks need to vary behaviour by series please supply your own unique id value.
Default: auto-generated value
data
DatumType[]
The data to use when rendering the series. If this is not supplied, data must be set on the chart instead.
visible
boolean
Whether or not to display the series.
Default: true
showInLegend
boolean
Whether or not to include the series in the legend.
Default: true
cursor
string
The cursor to use for hovered area markers. This config is identical to the CSS cursor property.
Default: 'default'
listeners
AgSeriesListeners<DatumType>
A map of event names to event listeners. 
listeners: AgSeriesListeners<DatumType>;

interface AgSeriesListeners<DatumType> {
  // The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is clicked. 
  nodeClick?: (params: AgSeriesNodeClickParams<DatumType>) => void;
  // The listener to call when a node (marker, column, bar, tile or a pie sector) in the series is double clicked. 
  nodeDoubleClick?: (params: AgSeriesNodeClickParams<DatumType>) => void;
}

interface AgSeriesNodeClickParams<DatumType> {
  // Event type. 
  type: 'nodeClick';
  // Series ID, as specified in series.id (or generated if not specified) 
  seriesId: string;
  // Datum from the series data array. 
  datum: DatumType;
  // xKey as specified on series options 
  xKey?: string;
  // yKey as specified on series options 
  yKey?: string;
  // sizeKey as specified on series options 
  sizeKey?: string;
  // labelKey as specified on series options 
  labelKey?: string;
  // colorKey as specified on series options 
  colorKey?: string;
  // angleKey as specified on series options 
  angleKey?: string;
  // calloutLabelKey as specified on series options 
  calloutLabelKey?: string;
  // sectorLabelKey as specified on series options 
  sectorLabelKey?: string;
  // radiusKey as specified on series options 
  radiusKey?: string;
}
highlightStyle
AgSeriesHighlightStyle
Configuration for series markers and series line highlighting when a marker / data point or a legend item is hovered over. 
highlightStyle: AgSeriesHighlightStyle;

interface AgSeriesHighlightStyle {
  // Highlight style used for an individual marker when tapped or hovered over. 
  item?: AgSeriesHighlightMarkerStyle;
  // Highlight style used for whole series when one of its markers is tapped or hovered over. 
  series?: AgSeriesHighlightSeriesStyle;
}

interface AgSeriesHighlightMarkerStyle {
  // The fill colour of a marker when tapped or hovered over. Use `undefined` for no highlight. 
  fill?: CssColor;
  // The opacity of the fill for the highlighted item. 
  fillOpacity?: Opacity;
  // The stroke colour of a marker when tapped or hovered over. Use `undefined` for no highlight. 
  stroke?: CssColor;
  // The stroke width of a marker when tapped or hovered over. Use `undefined` for no highlight. 
  strokeWidth?: PixelSize;
}

type CssColor = string

type Opacity = number

type PixelSize = number

interface AgSeriesHighlightSeriesStyle {
  enabled?: boolean;
  // The opacity of the whole series (area line, area fill, labels and markers, if any) when another chart series or another stack level in the same area series is highlighted by hovering a data point or a legend item. Use `undefined` or `1` for no dimming. 
  dimOpacity?: Opacity;
  // The stroke width of the area line when one of the markers is tapped or hovered over, or when a tooltip is shown for a data point, even when series markers are disabled. Use `undefined` for no highlight. 
  strokeWidth?: PixelSize;
}
nodeClickRange
AgChartInteractionRange
Range from a node a click triggers the listener.
Default: 'exact'
nodeClickRange: AgChartInteractionRange;

type AgChartInteractionRange = 
      PixelSize 
    | 'exact' 
    | 'nearest'


type PixelSize = number

Next Up

Continue to the next section to learn about the Line Series.