AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

Vue ChartsQuadrant Chart

Version 14.2.0
Enterprise

A Quadrant Chart displays data as a scatter or bubble series, divided into four independently styled regions around a pivot point.

Simple Quadrant Chart Copy Link

To create a Quadrant Chart, use the createQuadrantChart() API with an AgQuadrantChartOptions object.

template: `<ag-quadrant-chart :options="options" />`,
components: {
    'ag-quadrant-chart': AgQuadrantChart,
},
data() {
    return {
        options: {
            data: getData(),
            title: { text: 'Product Portfolio Review' },
            xKey: 'revenueGrowth',
            yKey: 'marginChange',
            labelKey: 'category',
            xAxis: { title: { text: 'Revenue growth (%)' } },
            yAxis: { title: { text: 'Margin change (% points)' } },
        },
    };
}

In this configuration:

  • data is an array of objects, each representing a point on the chart.
  • xKey and yKey map the two measures being compared, with the optional labelKey providing a third measure for the marker text.
  • xAxis and yAxis options can be used to set titles, labels and other axis features.
  • Marker labels are shown by default when labelKey or a label object is set, and hidden otherwise; set label.enabled to override either way.

Marker Size Copy Link

To vary the size of the markers to visualise a third dimension, provide a sizeKey.

 
{
    sizeKey: 'revenue',
    minSize: 8,
    maxSize: 40,
}

In this configuration:

  • sizeKey maps to the data field determining the size of each marker.
  • minSize sets the size of the marker for the smallest data point. This defaults to the size property when not set.
  • maxSize sets the size for the largest data point.

When sizeKey is not set, the size property sets a fixed size for every marker.

Pivot Copy Link

The pivot option determines the data values at which the regions are divided. It defaults to { x: 0, y: 0 }.

 
{
    pivot: { x: 4, y: 6 },
}

In this configuration:

  • pivot.x and pivot.y divide the chart into regions at an effort of 4 and an impact of 6.
  • The pivot uses a data value tied to both the x- and y-axis, allowing full control over the size of the regions.

Regions Copy Link

The fill and stroke of each region, as well as the style of their markers and labels is configured under the region specific properties within the regions options. There is also a shared regions.label property which each region can override as necessary.

Callbacks such as itemStyler, tooltip.renderer and label callbacks receive the region of each point to allow for region specific styling.

Labels Copy Link 

{
    regions: {
        label: { position: 'inside-outer-outer' },
        topLeft: { label: { text: 'Shrinking, Wider Margins' } },
        topRight: { label: { text: 'Growing, Wider Margins' } },
        bottomLeft: { label: { text: 'Shrinking, Thinner Margins' } },
        bottomRight: { label: { text: 'Growing, Thinner Margins' } },
    },
}

In this example:

  • Use the dropdown to change the label.position, moving a region label to any corner, any edge or the center of each region.
  • All regions use the shared label option.
  • Each region has its own label.text to set the text for that region.

Customisation Copy Link 

{
    regions: {
        label: { fontSize: 14, fontWeight: 'bold' },
        topLeft: {
            fill: {
                type: 'gradient',
                rotation: 315,
                colorStops: [{ color: 'rgba(56, 189, 248, 0)' }, { color: '#38bdf8' }],
            },
            stroke: '#0284c7',
            marker: { fill: '#38bdf8', strokeWidth: 0 },
            label: { text: 'Slower Warming, Wetter', color: '#0284c7' },
        },
        topRight: {
            // ... other options
            marker: { fill: '#a855f7', strokeWidth: 0, size: 14 },
        },
        bottomLeft: {
            // ... other options
            marker: { fill: '#14b8a6', stroke: '#0d9488', strokeWidth: 2, shape: 'cross' },
        },
        // ... other regions
    },
    tooltip: {
        renderer: ({ region }) => ({
            title: formatRegion(region),
        }),
    },
}

In this configuration:

  • fill takes a colour, gradient, pattern or image; stroke outlines the region.
  • marker styles the points inside that region, including size and shape.
  • label sets the region label text and colour. Styling shared by every region goes on regions.label.
  • A region property is also passed to itemStyler, tooltip.renderer and label callbacks. It is used here to set the tooltip title.

Axes Copy Link

By default the axis lines cross at the pivot, while the axis titles, labels and crosshair labels stay at the edge of the chart.

 
{
    alignAxesToPivot: true,
    axisPlacement: {
        title: 'crossing',
        label: 'crossing',
        crosshairLabel: 'crossing',
    },
    xAxis: {
        title: { text: 'Effort' },
    },
    yAxis: {
        title: { text: 'Impact' },
    },
}

In this configuration:

  • alignAxesToPivot toggles whether the axis lines to cross at the pivot point or remain at the edge.
  • axisPlacement.title, .label and .crosshairLabel each default to 'edge'. Set any to 'crossing' to move them to the pivot while alignAxesToPivot is true.
  • The xAxis and yAxis properties allow customising the axes which are both Number Axes.

Quadrant Chart Examples Copy Link

See more Quadrant Chart examples in the AG Charts Gallery.

Quadrant Chart Example
Quadrant Chart With Varying Size Example
Quadrant Chart With Large Data Example

API Reference Copy Link

Properties available on the AgQuadrantChartOptions interface.

xKey required DatumKey
The key to use to retrieve x-values from the data.
yKey required DatumKey
The key to use to retrieve y-values from the data.
theme AgChartTheme | AgChartThemeName
A predefined theme name or an object containing theme overrides. See: [Themes Reference](/themes-api/)
data DatumDefault[]
The data to render the chart from. If this is not specified, it must be set on individual series instead.
dataIdKey DatumKey
The key of the property on each datum that contains its unique identifier. When specified, transactions will match items by this field instead of by object reference. The values of this field must be unique across the dataset.
container HTMLElement | null
The element to place the rendered chart into.
initialState AgInitialStateOptions
The initial state of the chart. This must be a serialisable value.
width PixelSize
The width of the chart in pixels.
height PixelSize
The height of the chart in pixels.
minHeight PixelSize default: 300
Sets the minimum height of the chart. Ignored if `height` is specified.
minWidth PixelSize default: 300
Sets the minimum width of the chart. Ignored if `width` is specified.
padding Padding
Configuration for the padding of the chart. A number applies uniform padding; an object sets each side.
title AgChartCaptionOptions
Configuration for the title shown at the top of the chart.
subtitle AgChartSubtitleOptions
Configuration for the subtitle shown beneath the chart title.
footnote AgChartFooterOptions
Configuration for the footnote shown at the bottom of the chart.
animation AgAnimationOptions
Configuration for chart animations.
contextMenu AgContextMenuOptions
Configuration for the context menu.
locale AgLocaleOptions
Configuration for localisation.
selection AgChartSelectionOptions
Data selection options
listeners AgBaseChartListeners
A map of event names to event listeners.
formatter FormatterConfiguration
Global formatter configuration.
enableRtl boolean
Set to `true` to render the chart in right-to-left mode. If not specified, the chart will detect the `dir` attribute on the container or its ancestors.
alignAxesToPivot boolean default: true
Whether to move the axis lines so that they cross at the pivot. When `false`, the axes stay at the bottom and left of the chart.
axisPlacement AgQuadrantAxisPlacementOptions
Configuration for placement of axis titles and labels.
errorBar AgErrorBarOptions
Configuration for the Error Bars.
itemStyler Styler
Function used to return formatting for individual markers, based on the supplied information.
label AgQuadrantLabelOptions
Configuration for the labels shown on top of data points.
pivot AgQuadrantPivotOptions
The data values at which the chart is divided into four regions.
regions AgQuadrantRegionsOptions
Configuration for each of the four regions the pivot divides the chart into.
sizeKey DatumKey
The key to use to retrieve size values from the data, used to control the size of the markers.
sizeName string
A human-readable description of the size values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
minSize PixelSize
Determines the smallest size a marker can be in pixels when `sizeKey` is present. Defaults to `size` when not set.
maxSize PixelSize
Determines the largest size a marker can be in pixels when `sizeKey` is present.
tooltip AgSeriesTooltip
Series-specific tooltip configuration.
xAxis AgQuadrantAxisOptions
Configuration for the horizontal axis, which is always a number axis. Its ticks are hidden by default.
yAxis AgQuadrantAxisOptions
Configuration for the vertical axis, which is always a number axis. Its ticks are hidden by default.
labelKey DatumKey
The key to use to retrieve values from the data to use as labels for the markers.
xName string
A human-readable description of the x-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
yName string
A human-readable description of the y-values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
labelName string
A human-readable description of the label values. If supplied, this will be shown in the default tooltip and passed to the tooltip renderer as one of the parameters.
maxRenderedItems number default: 2000
Determines the largest number of items that can be rendered at once. If there are more items, they will be aggregated to resemble similar visual appearance.
styler Styler
Function used to return formatting for entire series, based on the given parameters.
highlight AgMultiSeriesHighlightOptions
Configuration for highlighting when a series or legend item is hovered over.
cursor string
The cursor to use for hovered markers. This config is identical to the CSS `cursor` property.
context ContextDefault
Context object to use in callbacks.
nodeClickRange InteractionRange
Range from a node that a click triggers the listener.
size PixelSize
The size in pixels of the markers.
shape AgMarkerShape
The shape to use for the markers. You can also supply a custom marker by providing a `AgMarkerShapeFn` function.
fill AgColorType
The colour for filling shapes. A colour string, or an object for a gradient, pattern, or image fill.
fillOpacity Opacity
The opacity of the fill colour.
stroke AgCssColorOrRef
The colour for the stroke.
strokeWidth PixelSize
The width of the stroke in pixels.
strokeOpacity Opacity
The opacity of the stroke colour.
lineDash PixelSize[]
An array specifying the length in pixels of alternating dashes and gaps.
lineDashOffset PixelSize
The initial offset of the dashed line in pixels.