repository·latest·Indexed 19 days ago
https://github.com/ag-grid/ag-chartsA high-performance, canvas-based JavaScript charting library with no third-party dependencies. It features specialized integrations for React, Angular, and Vue, and supports server-side rendering to PNG or JPEG images in Node.js (version 20.0.0+) using skia-canvas.
AG Charts is a fully-featured, highly customizable, canvas-based JavaScript charting library. It is designed for outstanding performance and has no third-party dependencies.
Key features include support for popular frameworks:
AG Charts is available in two versions:
ag-charts-community: Free under the MIT license. Includes core series types like Pie, Area, Bar, Scatter, and Bubble, along with features like Accessibility, Tooltips, Themes, Markers, Legends, and Axis Types.ag-charts-enterprise: Available under a commercial license. Includes all community features plus advanced series like Maps, Sankey, Radar, Waterfall, Box Plot, Candlestick, OHLC, Heatmap, Histogram, Nightingale, Radial Column, Radial Bar, Range Area, Range Bar, Sunburst, Treemap, Chord, and more. It also adds advanced interactivity like Animations, Context Menus, Zooming, Navigators, Synchronization, and Financial Charts.AG Charts (both Community and Enterprise modules) officially supports the following browsers and platforms:
AG Charts provides several ways to customize the appearance and content of crosshair labels:
Crosshair labels follow a formatting hierarchy. By default, a crosshair label inherits the format of its corresponding axis unless an explicit label.format is provided in the crosshair configuration.
You can provide a custom renderer that returns a style object. The renderer receives the value and fractionDigits. You can return properties such as:
textcolorbackgroundColoropacityYou can apply custom CSS by using the ag-charts-crosshair-label class. This allows for styling elements like border-radius or other standard CSS properties.
For complete control, the renderer can return a string of HTML. This allows you to build complex structures, such as labels with custom arrow pointers or specific nested layouts.
To visualize outliers in a Box Plot, combine the box-plot series with a scatter series.
Implementation Pattern:
box-plot series to represent the quartiles and whiskers.scatter series to plot individual data points that fall outside the whisker ranges.You can segment an area chart based on values along the Y-axis. This is useful for highlighting positive vs. negative variance.
To implement Y-axis segmentation:
chart.type to 'area'.segmentation.key to 'y'.stop value. For example, to color negative values red, create a segment with stop: 0 and fill: 'red', stroke: 'red'.fill: 'green', stroke: 'green') which will be applied to the segment that does not match the specific segment criteria.Segments can inherit properties like fillOpacity and strokeWidth from the series defaults.
{
"chart": {
"type": "area"
},
"segmentation": {
"key": "y"
},
"series": [
{
"fill": "green",
"stroke": "green",
"fillOpacity": 0.3,
"strokeWidth": 2
}
],
"segments": [
{
"stop": 0,
"fill": "red",
"stroke": "red"
}
]
}When handling events like legendItemClick, you can use the preventDefault() method provided in the event object to stop the chart's default behavior.
For example, if you want to implement a custom counter that only toggles series visibility after a certain number of clicks, you would call event.preventDefault() inside the legendItemClick listener to prevent the legend from immediately toggling the series visibility.
The Range Bar Series automatically handles missing or invalid data by creating gaps in the series. Invalid values that trigger a gap include:
nullundefinedNaN+/-InfinityThis behavior applies to continuous axes such as number, time, and log axes.
When configuring a Content Security Policy for AG Charts, keep the following requirements in mind:
style-src: If you do not provide a styleNonce, your policy must include the 'unsafe-inline' rule to allow tooltips and HiDPI canvas styling to function. Providing a styleNonce allows you to avoid this.script-src: The policy should be configured to work with the 'self' rule. AG Charts does not use inline scripts or eval().data: URLs. Ensure your CSP allows data: in the img-src directive if these features are required.Error Bars are an enterprise feature used to visualize data variability or uncertainty. They can be applied to Bar, Line, and Scatter series.
There are two types of error bar configurations:
To use error bars, add the errorBar property to your series configuration object.
// Example configuration structure
series: [{
type: 'line',
errorBar: {
yLowerKey: 'lowerCI',
yUpperKey: 'upperCI',
// ... other options
}
}]You can render multiple donut series in a single chart to create concentric rings. To prevent overlapping, you must manage the innerRadiusRatio and outerRadiusRatio for each series so that there is a gap between them.
For example, to create an outer ring and an inner ring:
outerRadiusRatio: 1, innerRadiusRatio: 0.9 (thickness of 0.1)outerRadiusRatio: 0.6, innerRadiusRatio: 0.2 (thickness of 0.4)This leaves a gap of 0.3 between the rings.
To show titles for each ring in the legend, set showInLegend: true on the series title configuration.
// Outer Ring
{
type: 'donut',
title: { text: 'Previous Year', showInLegend: true },
outerRadiusRatio: 1,
innerRadiusRatio: 0.9
},
// Inner Ring
{
type: 'donut',
title: { text: 'Current Year', showInLegend: true },
outerRadiusRatio: 0.6,
innerRadiusRatio: 0.2
}AG Charts allows you to control the range of values displayed on an axis (the 'domain') through several configuration properties. You can use automatic calculation, 'nice' rounding, or manual overrides.
By default, the axis domain is calculated automatically based on your data. You can use the nice property to extend the axis range to visually pleasing, round numbers (e.g., extending a range of 1.87–88.07 to 0–100).
You can explicitly set the boundaries of a continuous axis using min and max. When these are provided, they override the automatic data-driven calculation.
The reverse property allows you to flip the scale of the axis, which is useful for changing the orientation of series like bar charts.