Search

React ChartsUpgrade to AG Charts 10

What's New

See the release post for feature highlights of what's new in this major version.

Users of integrated charting on AG Grid, should refer to this migration guide when upgrading to AG Grid 32.

Breaking Changes

This release includes the following breaking changes:

  • The AgChart entrypoint is renamed to AgCharts.
  • AgCharts.update() moved to AgChartInstance.update().
  • AgCharts.updateDelta() moved to AgChartInstance.updateDelta().
  • AgCharts.download() moved to AgChartInstance.download().
  • AgCharts.getImageDataURL() moved to AgChartInstance.getImageDataURL().
  • autosize is removed. Charts will autosize automatically by default. Use height, width, minHeight, minWidth to change this.
  • Charts smaller than the provided container, now display in the centre of the container instead of top-left.
  • Series key properties no longer support general expressions. The only acceptable property paths are .dot and ['square-bracket'] expressions.
  • AgNodeDoubleClickEvent , AgSeriesNodeClickEvent and AgSeriesNodeDoubleClickEvent are all replaced by AgNodeClickEvent.
  • Support for Vue 2 has been dropped as it has reached EOL. See the Vue project page for more details.

Series Changes

  • innerRadiusOffset, innerRadiusRatio, innerCircle, innerLabels are removed from pie series. Use donut series instead.

  • pie and donut series strokes are now rendered on the inside of each sector. Instead of using strokeWidth to add spacing between the sectors, use sectorSpacing.

  • innerLabels.margin on donut series is renamed to innerLabels.spacing.

  • scatter and bubble series options contained within marker object are moved to the top level. marker.enabled is removed.

  • formatter function on all series, marker and error-bars is renamed to itemStyler.

  • All SeriesFormatterParams are renamed to SeriesItemStylerParams.

    • AgBarSeriesFormatterParams is renamed to `AgBarSeriesItemStylerParams``.
    • AgPieSeriesFormatterParams is renamed to AgPieSeriesItemStylerParams.
    • AgDonutSeriesFormatterParams is renamed to AgDonutSeriesItemStylerParams.
    • AgBoxPlotSeriesFormatterParams is renamed to AgBoxPlotSeriesItemStylerParams.
    • AgCandlestickSeriesFormatterParams is renamed to AgCandlestickSeriesItemStylerParams.
    • AgHeatmapSeriesFormatterParams is renamed to AgHeatmapSeriesItemStylerParams.
    • AgOhlcSeriesFormatterParams is renamed to AgOhlcSeriesItemStylerParams.
    • AgWaterfallSeriesFormatterParams is renamed to AgWaterfallSeriesItemStylerParams.
    • AgSunburstSeriesFormatterParams is renamed to AgSunburstSeriesItemStylerParams.
    • AgTreemapSeriesFormatterParams is renamed to AgTreemapSeriesItemStylerParams.
    • AgRadialSeriesFormatterParams is renamed to AgRadialSeriesItemStylerParams.
    • AgMapLineSeriesFormatterParams is renamed to AgMapLineSeriesItemStylerParams.
    • AgMapMarkerSeriesFormatterParams is renamed to AgMapMarkerSeriesItemStylerParams.
    • AgMapShapeSeriesFormatterParams is renamed to AgMapShapeSeriesItemStylerParams.

  • AgSeriesMarkerFormatterParams is renamed `AgSeriesMarkerStylerParams

  • AgErrorBarFormatterParams is renamed to AgErrorBarItemStylerParams.

  • fills[] and strokes[] are removed from AgPieSeriesItemStylerParams and AgDonutSeriesItemStylerParams.

  • value is removed from waterfall AgWaterfallSeriesItemStylerParams.

  • AgPieSeriesFormat is renamed to AgPieSeriesStyle.

  • AgDonutSeriesFormat is renamed to AgDonutSeriesStyle.

  • AgRadialSeriesFormat is renamed to AgRadialSeriesStyle.

  • AgWaterfallSeriesFormat is renamed to AgWaterfallSeriesStyle.

  • AgRangeBarSeriesFormat is renamed to AgRangeBarSeriesStyle.

  • AgHeatmapSeriesFormat is renamed to AgHeatmapSeriesStyle.

  • AgBoxPlotSeriesStyles is renamed to AgBoxPlotSeriesStyle.

  • AgRadarSeriesItemStylerParams added a <TDatum> generic.

  • AgSunburstSeriesItemStylerParams generic no longer has a default value.

  • AgTreemapSeriesItemStylerParams generic no longer has a default value.

  • AgErrorBarOptions added a <TDatum> generic.

  • AgPieSeriesTooltipRendererParams added a <TDatum> generic.

  • AgDonutSeriesTooltipRendererParams added a <TDatum> generic.

  • AgCandlestickSeriesTooltipRendererParams added a <TDatum> generic.

  • AgHeatmapSeriesTooltipRendererParams added a <TDatum> generic.

  • AgOhlcSeriesTooltipRendererParams added a <TDatum> generic.

  • AgRangeBarSeriesTooltipRendererParams added a <TDatum> generic.

  • AgRadialSeriesTooltipRendererParams added a <TDatum> generic.

Axes Changes

  • groupPaddingInner on category axis has no effect when series are not grouped. Use paddingInner instead.
  • axes.tick.color is renamed to axes.tick.stroke.
  • axes.line.color is renamed to axes.line.stroke.
  • axes.tick.minSpacing, axes.tick.maxSpacing, axes.tick.values are moved to axes.interval.
  • axes.tick.interval is moved to axes.interval.step.
  • formatter property removed from AgAxisLabelFormatterParams.

Miscellaneous

  • legend.item.line.length is now the length of the entire legend item line, regardless of whether or not a marker is present.
  • legend.item.toggleSeriesVisible is replaced by legend.toggleSeries.
  • AgGradientLegendOptions.stop is removed, use scale instead.
  • navigator.margin is renamed to navigator.spacing.
  • AgContextMenuActionParams is replaced by AgNodeContextMenuActionEvent.
  • AgNodeContextMenuActionEvent.itemId is removed, use xKey, yKey, angleKey etc instead.
  • fontWeight no longer supports Strings for numeric values. Use numbers instead.
  • AgChartThemeOptionalPalette has been renamed and replaces AgChartThemePalette.
  • errorBar.cap.formatter is removed. Cap options can be return in the top level errorBar.itemStyler.
  • type property removed without replacement from
    • AgAngleCategoryAxisThemeOptions
    • AgAngleNumberAxisThemeOptions
    • AgRadiusCategoryAxisThemeOptions
    • AgRadiusNumberAxisThemeOptions.

ag-charts-react

  • The AgChartsReact export is renamed to AgCharts.
  • The height of the chart container is no longer automatically set to 100%.
  • containerStyle is renamed to style.

ag-charts-angular

  • The AgChartsAngular export is renamed to AgCharts.
  • The ag-charts-angular template tag is renamed to ag-charts.

ag-charts-vue3

  • The AgChartsVue export is renamed to AgCharts.
  • The height of the chart container is no longer automatically set to 100%.
  • vue-class-component is no longer required.

Behaviour Changes

This release includes the following behaviour changes:

Theme Defaults

  • Gradient Legend values default to descending order when position is 'left' or 'right'. Use reverseOrder to change.
  • pie and donut series strokes now default to palette colours.
  • pie and donut series strokeWidth now defaults to 0.
  • Crosshairs now snap by default for number axis of range-bar and range-area series. Use snap: false to change.
  • Crosshair labels for dark modes now have a different background colour.
  • legend.item.showSeriesStroke defaults to true.

Other Changes

  • Pan left and Pan right zoom buttons move the chart by one step rather than the entire viewport width.
  • Time format in tooltips and crosshair labels defaults to a prettier format.
  • Time and Number format in tooltips now follows the axis[].format if provided. Use a tooltip renderer to specify a tooltip specific format.
  • The zoom-in and zoom-out icons have been changed. The previous ones are renamed to zoom-in-alt and zoom-out-alt.
  • The zoom icons are now grouped. Use the section option to create your own groupings.
  • Wrapped and truncated text may display differently.
    • More precise text measurement allows display of more characters from longer labels to be displayed before wrapping or truncating.
    • Wrapping strategy is improved to give more balanced lines.
    • Manual line breaks are respected even if wrapping: 'never'.
    • When manual line breaks are provided, wrapping and truncation is applied to each line separately.

Changes List

If you would like to see the full list of changes in this release, please see the Changelog.