React Chart - JSON Data

To bind the Chart to data in a JSON format, assign the data's URL to the dataSource property.

App.js


import Chart from 'devextreme-react/chart';
 
export default function App() {
    return (
        <Chart dataSource="http://www.example.com/dataservices/data.json">
            {/* ... */}
        </Chart>
    );
}

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().

App.js


import Chart from 'devextreme-react/chart';
 
export default function App() {
    return (
        <Chart dataSource="http://www.example.com/dataservices/jsonpdata?callback=?">
            {/* ... */}
        </Chart>
    );
}

If you need to process data after obtaining it, implement the CustomStore. For details, see the Custom Sources topic.

View Demo

React Chart - JSON Data

See Also