Guest post by Kamil Musiałowski: Developer Highcharts Support Engineer
Throughout reading the docs you’ve probably learned how to set up a plain project with Highcharts + Connectors. Now, chances are you’re using a framework for your website, thus in this article you will learn how to set up Highcharts React integration with Morningstar’s DWS API in a few steps.
What is a Highcharts React integration?
The latest Highcharts React integration allows you to seamlessly incorporate Highcharts into your React application in a more Reactive style. This means that instead of having to import the whole Highcharts code file, you can simply import the components needed for your visualization and compose them into a nicely crafted chart. Later on, you will learn how to install, import and finally display a chart using Highcharts React integration. For further information, you can dive into the getting started article.
Morningstar’s DWS API in brief
The DWS (Direct Web Services) API from Morningstar is the new API service which includes Investment Details API and Time Series API endpoints along with more to come later. In order to get the general idea of the DWS, you can glance through this article.
Setting up Highcharts in your React project
In this section we assume that you already have a React project set up and running, whether it’s Vite, Next.js, or a plain React app. If not, follow the official React guide for setting up one first.
Install the package
In your terminal, run the command below to install the latest Highcharts React package. Note that the latest release requires a version of React 18.3.1 or higher.
npm install @highcharts/reactCreate a minimal chart
In order to render a simple stock chart with Highcharts React, you just have to import the StockChart component along with the type of series you’d like to show – and that’s it! You can copy and paste the syntax below into your project in order to view a simple line chart.
import { StockChart } from '@highcharts/react/Stock';
import { LineSeries } from '@highcharts/react/series/Line';
import { Title } from '@highcharts/react/options';
export default function LineChart() {
return (
<StockChart>
<Title>Fund growth</Title>
<LineSeries name="Mock data" data={[3, 4, 1, 5, 2]} />
</StockChart>
);
}Connecting to the Morningstar DWS API
Install the package and set it up
The first step in order to combine Highcharts React and DWS API is to install the Highcharts Connectors for Morningstar, which allows you to easily pull the financial data of your interest into your frontend application in a plug-and-play format for Highcharts. Download and install the Morningstar Connectors package by running this command:
npm install @highcharts/connectors-morningstarThen, import the package. For the sake of simplicity, we’re gonna import it directly into the same place as where the chart lies, however you can manage the data differently depending on your use case.
import { TimeSeriesConnector } from '@highcharts/connectors-morningstar/dws';Authenticate the connector and fetch data
In order to make requests to the Morningstar API, you need to authenticate yourself. This is done through an access token retrieved from your server. We will create a simple async function with the purpose of fetching the data directly, wrapped inside the useEffect hook.
const [data, setData] = useState([]);
useEffect(() => {
const getData = async () => {
// Retrieve token from the server
const token = await getToken();
const connector = new TimeSeriesConnector({
api: {
access: { token }
},
ids: [{
id: '0P00000FIA',
idType: 'performanceId'
}],
category: 'performance',
dataPoint: 'growth',
startDate: '2024-10-30',
endDate: '2025-10-30'
});
await connector.load();
// Set the data from the connector
setData(connector.getTable().getRows(
void 0, void 0, ['Date', 'Value']
));
};
// Call the async function to fetch the data
getData();
}, []); Exchanging credentials for a token is something your own server should handle; getToken represents whatever function you use to retrieve a valid JWT (JSON Web Token) for authorizing Morningstar API requests – how you implement it is up to you – however that’s outside the scope of this article. All the endpoint needs to do is return a valid Morningstar access token, that you can later pass straight into the connector’s api.access option.
Pass the data into the series component
At last, we need to pass the retrieved data into our Stock Chart component in order to display it. You can simply replace the mock data that we’ve previously set into the data object.
return (
<StockChart>
<Title>Fund growth</Title>
<LineSeries name="Capital Group Global Equity Fund (LUX) B" data={data} />
</StockChart>
);Putting it all together
Below is the complete component, with every step above combined into a single file. Note how the hooks live inside the LineChart component, above the return, and how all of the imports sit together at the top of the file.
Installation
npm install @highcharts/react @highcharts/connectors-morningstarThe full component
import { useEffect, useState } from 'react';
import { StockChart } from '@highcharts/react/Stock';
import { LineSeries } from '@highcharts/react/series/Line';
import { Title } from '@highcharts/react/options';
import { TimeSeriesConnector } from '@highcharts/connectors-morningstar/dws';
export default function LineChart() {
const [data, setData] = useState([]);
useEffect(() => {
const getData = async () => {
// Retrieve token from the server
const token = await getToken();
const connector = new TimeSeriesConnector({
api: {
access: { token }
},
ids: [{
id: '0P00000FIA',
idType: 'performanceId'
}],
category: 'performance',
dataPoint: 'growth',
startDate: '2024-10-30',
endDate: '2025-10-30'
});
await connector.load();
// Set the data from the connector
setData(connector.getTable().getRows(
void 0, void 0, ['Date', 'Value']
));
};
// Call the async function to fetch the data
getData();
}, []);
return (
<StockChart>
<Title>Fund growth</Title>
<LineSeries name="Capital Group Global Equity Fund (LUX) B" data={data} />
</StockChart>
);
}Try it live
Want to see this running without your own Morningstar credentials? Check out this complete example on StackBlitz – instead of fetching a token for your Morningstar credentials, it proxies requests to a Highcharts server serving static sample data, with every other step identical to what’s covered above.
And that is it – a fully functioning chart including data fetched from Morningstar DWS API successfully integrated into your React application.
Licensing
Using the connectors requires a Highcharts Partner Data License and a Morningstar Direct Web Services account. If you would like to talk through your specific use case, or see the connectors running against your own data, reach out to our team.
Leave a Reply