OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts
Implement Syncfusion React Charts component for data visualization. Use this when creating charts, configuring axes and series, or customizing visualization styles. This skill covers chart types, data binding, user interactions, financial indicators, accessibility features, and professional data visualization in React applications.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-charts
Use this skill when you need to:
addPoint, removePoint, setData)marker.dataLabel, not directly on the series)Syncfusion React Chart is a powerful data visualization component that supports 20+ chart types with extensive customization options. It's designed for building professional dashboards, reports, and analytics applications with interactive features like zooming, selection, and tooltips.
Key Capabilities:
📄 Read: references/api-reference.md
📄 Read: references/getting-started.md
📄 Read: references/chart-types.md
📄 Read: references/axes-and-customization.md
📄 Read: references/series-and-data.md
DataManagerODataAdaptor, ODataV4Adaptor, WebApiAdaptor, custom adaptorsaddPoint, removePoint, setData, or React state📄 Read: references/appearance-and-styling.md
📄 Read: references/user-interaction.md
📄 Read: references/advanced-features.md
When displaying multiple datasets that share the same axes, add multiple SeriesDirective components within SeriesCollectionDirective:
Three approaches depending on the use case:
a) React state (simple re-render):
b) addPoint / removePoint / setData (imperative, with animation):
Use DataManager with an adaptor to bind data from a REST API or OData service:
Other adaptors: ODataAdaptor (OData v3), ODataV4Adaptor (OData v4), custom adaptor by extending ODataAdaptor.
Data labels must be placed inside marker.dataLabel, not directly on the series. Inject DataLabel service:
Enhance user experience with formatted tooltip templates:
Use container styling to make charts responsive:
| Prop | Type | Purpose | When to Use |
|---|---|---|---|
id | string | Unique identifier | Required for each chart |
width | string | Chart width (px or %) | Control layout sizing |
height | string | Chart height | Set explicit dimensions |
title | string | Chart title | Display main heading |
tooltip | object | Tooltip configuration | Interactive data inspection |
primaryXAxis | object | Primary X-axis config | Define horizontal axis |
primaryYAxis | object | Primary Y-axis config | Define vertical axis |
| Prop | Type | Purpose | When to Use |
|---|---|---|---|
dataSource | array | DataManager | Data source | Bind local array or remote DataManager |
xName | string | X-axis property | Map data field to X |
yName | string | Y-axis property | Map data field to Y |
type | string | Chart type | Select visualization type |
fill | string | Series color | Customize series color |
marker | object | Marker + data label config | Show point markers and/or data labels (marker.dataLabel) |
name | string | Series name | Display in legend |
query | Query | DataManager query | Filter/sort/paginate remote data |
addPoint/removePoint for live feeds with smooth animationDataManager with WebApiAdaptor or ODataAdaptor directly to seriesODataV4Adaptor with a Query to filter and paginate at the serverChoose the reference that matches your current need:
<SeriesCollectionDirective>
<SeriesDirective dataSource={salesData} xName='month' yName='revenue' type='Column' />
<SeriesDirective dataSource={profitData} xName='month' yName='profit' type='Column' />
</SeriesCollectionDirective>const [data, setData] = useState(initialData);
const handleDataUpdate = () => {
setData(prev => [...prev, { x: 'Jun', y: 45 }]);
};
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />const chartRef = useRef(null);
// Add a point
chartRef.current.series[0].addPoint({ x: 'Jun', y: 45 }, 300);
// Remove first point
chartRef.current.series[0].removePoint(0, 300);
// Replace all data
chartRef.current.series[0].setData(newDataArray, 500);
<ChartComponent ref={chartRef} ...>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Line' />
</ChartComponent>import { DataManager, Query, WebApiAdaptor } from '@syncfusion/ej2-data';
const dataManager = new DataManager({
url: 'your data source URL link',
adaptor: new WebApiAdaptor()
});
<SeriesDirective dataSource={dataManager} xName='CustomerID' yName='Freight' type='Column' query={new Query()} /><Inject services={[LineSeries, Category, DataLabel]} />
<SeriesDirective
dataSource={data}
xName='x'
yName='y'
type='Line'
marker={{
visible: true,
dataLabel: { visible: true, position: 'Top' }
}}
/><ChartComponent tooltip={{ enable: true, template: '<div>${point.x}: ${point.y}</div>' }}><ChartComponent id='charts' width='100%' height='400px'>
{/* chart content */}
</ChartComponent>