Guest post by J\u0119drzej Ruta<\/b>: Developer Highcharts Support Engineer.<\/p>
\n\n
Morningstar is one of the most trusted names in financial data. But getting that data onto a screen has traditionally meant handling complex requests, and a mapping layer that someone has to maintain forever.<\/p>\n\n
The Highcharts connectors for Morningstar Direct Web Services (DWS) remove that detour. You configure your credentials once, pick the data you want, and the connector hands you a formatted data table that Highcharts can render directly, with easy access to raw data as well.<\/p>\n\n
In this tutorial we will go from an empty HTML file to a working chart built on Morningstar data. We will use the DWS bundle, which targets Morningstar’s newer API, and we will finish by looking at how the same few lines of setup unlock the rest of the DWS data catalogue.<\/p>\n\n
An equity sector chart showing how a fund’s stock holdings are spread across sectors – built with the Investment Details Connector<\/strong> and Highcharts, in three steps from an empty file.<\/p>\n\n The connectors ship in two flavours, and they are not interchangeable:<\/p>\n\n This tutorial uses the DWS bundle throughout. Its connectors live under the DWS is a broad service. Morningstar currently lists APIs, covering screeners, scenario analysis, portfolio X-Ray, performance, optimisation, risk scoring, and more. The connectors reach two of them: the Investment Details Connector we are about to use, which returns data views for a single investment, and the Time Series Connector for historical data such as performance and fees.<\/p>\n\n Create an Loading the bundle registers the connectors with Highcharts as a side effect and exposes them on the global If you are working in an app project rather than a plain HTML page, install the package and import it instead:<\/p>\n\n One difference to keep in mind as you read on. The Now create Three of those options deserve a closer look.<\/p>\n\n That is one request block and one This is the step where the connector’s design pays off. The three tables are the same breakdown at increasing detail. Every table has a Hand the table to the chart with the That is your first chart from Morningstar data: one connector, one converter, and no mapping layer in between.<\/p>\n\n Check the live outcome here.<\/a><\/p>\n\n One more detail worth knowing: the connector exposes the security’s Investment details are one half of what the connectors cover. The other is the It follows the same three beats you just used – and, like the code above, it belongs inside an Reading the result differs from the tables above. There is a single table whose first column is Both securities share one table, so each series names its own value column, and Highcharts Stock parses the Develop against pre-fetched JSON.<\/strong> Both DWS connectors accept an For multi-converter requests, key the object by converter name, exactly as above.<\/p>\n\n Set the region explicitly.<\/strong> Unless you say otherwise, the DWS connectors send their requests to Morningstar’s Americas endpoint. If your account is served by another region, set The three regional endpoints are Everything above creates connectors by hand, which is the pattern for Highcharts Core and Stock. With Highcharts Dashboards you do not have to: loading a bundle registers the connectors with the Dashboards registry automatically, and they become available in the data pool like any other connector type. Reference them as Components then bind to a table by name through The full option reference for every connector and converter lives in the Morningstar connectors documentation<\/a>, and each converter page lists the demos that go with it.<\/p>\n\n\n
connectors-morningstar<\/code><\/strong> – the legacy Enterprise Component API, covering Security Details, Screeners, X-Ray, Risk Score, Performance, and more.<\/li>\n connectors-morningstar-dws<\/code><\/strong> – the newer DWS API, covering the Investment Details API<\/strong> and the Time Series API<\/strong>, with more to come.<\/li>\n<\/ul>\n\nHighchartsConnectors.MorningstarDWS<\/code> namespace, while the legacy ones live under HighchartsConnectors.Morningstar<\/code>.<\/p>\n\nBuilding the sector breakdown chart<\/h2>\n\n
Step 1: Load Highcharts and the DWS connectors<\/h3>\n\n
index.html<\/code> file. A sector breakdown is a snapshot rather than a time series, so Highcharts Core is all we need here:<\/p>\n\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"UTF-8\" \/>\n <title>My First Morningstar Chart<\/title>\n <script src=\"https:\/\/code.highcharts.com\/highcharts.js\"><\/script>\n <script src=\"https:\/\/code.highcharts.com\/connectors\/morningstar\/connectors-morningstar-dws.js\"><\/script>\n <\/head>\n <body>\n <div id=\"container\"><\/div>\n <script src=\".\/demo.js\"><\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\nHighchartsConnectors<\/code> object. That is all the wiring there is.<\/p>\n\nnpm install @highcharts\/connectors-morningstar<\/code><\/pre>\n\nimport Highcharts from 'highcharts';\nimport { InvestmentsConnector } from '@highcharts\/connectors-morningstar\/dws';<\/code><\/pre>\n\n<script><\/code> tag exposes everything on the global HighchartsConnectors<\/code> object, which is why this tutorial writes new HighchartsConnectors.MorningstarDWS.InvestmentsConnector({ ... })<\/code>. An ES module sets no such global, so there you write new InvestmentsConnector({ ... })<\/code> with whatever you imported. Everything else is the same. See Installation<\/a> for more on the two loading methods.<\/p>\n\nStep 2: Configure the Investment Details Connector<\/h3>\n\n
demo.js<\/code>. Because loading data is asynchronous, we will build the chart inside an async<\/code> function and call it at the end of the file. The InvestmentsConnector<\/code> describes a single security, and you choose what you want to know about it by naming one or more of the available converters<\/a>:<\/p>\n\nasync function createChart () {\n const connector = new HighchartsConnectors.MorningstarDWS.InvestmentsConnector({\n api: {\n access: {\n token: 'your_access_token'\n }\n },\n security: {\n id: '0P00000FIA'\n },\n converters: {\n EquitySectorsBreakdown: {}\n }\n });\n ...<\/code><\/pre>\n\nsecurity<\/code><\/strong> takes a single id<\/code> – the Investment Details API describes one investment at a time. The identifier above is a Morningstar performanceId<\/code>.<\/p>\n\nconverters<\/code><\/strong> is the heart of this connector. Rather than one connector per data type, a single instance can request several converters at once, and each one populates its own named data tables. Here we ask for just EquitySectorsBreakdown<\/code>; the empty object is not a placeholder to fill in, since most converters need no options at all. Some accept startDate<\/code> and endDate<\/code> to bound a historical series:<\/p>\n\nconverters: {\n EquitySectorsBreakdown: {},\n AssetAllocationBreakdown: {},\n EquityStyleBox: {\n startDate: '2025-01-01',\n endDate: '2025-12-01'\n }\n}<\/code><\/pre>\n\nload()<\/code> for three datasets – a fund profile page with six panels needs one connector with six converters, not six connectors.<\/p>\n\napi.access<\/code><\/strong> carries your credentials. The token<\/code> is a Morningstar access token, which the connector sends as an Authorization: Bearer<\/code> header on every request. Issue it from your own backend rather than hard-coding it in the page, so the credentials never reach the browser. To learn more about authenticating yourself in Morningstar API, see the authentication page<\/a>.<\/p>\n\nconst { token } = await getToken();\n\nconst connector = new HighchartsConnectors.MorningstarDWS.InvestmentsConnector({\n api: {\n access: { token }\n },\n \/\/ ...security and converters as above\n});<\/code><\/pre>\n\nStep 3: Load the data and render the chart<\/h3>\n\n
EquitySectorsBreakdown<\/code> populates three data tables, already shaped for Highcharts, each retrieved by name:<\/p>\n\nawait connector.load();<\/code><\/pre>\n\nconst superSectorsTable = connector.getTable('EqSuperSectors'),\n sectorsTable = connector.getTable('EqSectors'),\n industriesTable = connector.getTable('EqIndustries');<\/code><\/pre>\n\nEqSuperSectors<\/code> groups holdings into Morningstar’s three super sectors – cyclical, defensive, and sensitive. EqSectors<\/code> splits those into the eleven sectors most readers will recognise, and EqIndustries<\/code> goes one level deeper.<\/p>\n\nType<\/code> column naming its categories, plus one column per measure: PercLong<\/code>, PercLongRescaled<\/code>, PercNet<\/code>, and PercShort<\/code>.<\/p>\n\ndataTable<\/code> option, then let each series pick its columns through dataMapping<\/code>: name<\/code> for the category label, y<\/code> for the value. The series name defaults to the column it maps to, so there is nothing else to wire up:<\/p>\n\n ...\n Highcharts.chart('container', {\n chart: {\n type: 'column'\n },\n title: {\n text: 'Equity Sectors Breakdown'\n },\n dataTable: sectorsTable,\n xAxis: {\n type: 'category'\n },\n yAxis: {\n title: {\n text: 'Sector weight'\n },\n labels: {\n format: '{value}%'\n }\n },\n tooltip: {\n valueSuffix: '%',\n valueDecimals: 2\n },\n series: [{\n dataMapping: { name: 'Type', y: 'PercLong' }\n }, {\n dataMapping: { name: 'Type', y: 'PercNet' }\n }]\n });\n}\n\ncreateChart();<\/code><\/pre>\n\ndataTable<\/code><\/a> and dataMapping<\/code><\/a> need Highcharts 13 or newer. On Highcharts 12, read the columns yourself and assign them to series.data<\/code> instead – e.g. sectorsTable.getColumn('PercLong')<\/code> in place of the mapping above.<\/p>\n\nperformanceId<\/code> through its metadata, which is handy for a subtitle:<\/p>\n\nsubtitle: {\n text: `Performance ID: ${connector.metadata.EquitySectorsBreakdown.performanceId}`\n}<\/code><\/pre>\n\nWhat else DWS gives you<\/h2>\n\n
EquitySectorsBreakdown<\/code> is one of eight converters currently available on the Investment Details Connector. The rest follow the identical pattern – name the converter, read its tables:<\/p>\n\n\n
EqSuperSectors<\/code>, EqSectors<\/code>, and EqIndustries<\/code> tables.<\/li>\n The other connector: Time Series<\/h2>\n\n
TimeSeriesConnector<\/code>, which targets Morningstar’s Time Series API and returns historical data for up to 25 securities in a single request.<\/p>\n\nasync<\/code> function. Two things differ: instead of converters you pick data with a category<\/code> and a dataPoint<\/code>, and instead of one security you pass a list:<\/p>\n\nconst growthConnector = new HighchartsConnectors.MorningstarDWS.TimeSeriesConnector({\n api: {\n access: {\n token: 'your_access_token'\n }\n },\n ids: [{\n id: '0P00000FIA',\n idType: 'performanceId'\n }, {\n id: '0P00002PB8',\n idType: 'performanceId'\n }],\n category: 'performance',\n dataPoint: 'growth',\n startDate: '2024-10-30',\n endDate: '2025-10-30',\n currencyId: 'EUR'\n});\n\nawait growthConnector.load();<\/code><\/pre>\n\ncategory<\/code> and dataPoint<\/code> map directly onto Morningstar’s Time Series API paths: take the two segments immediately after time-series\/v1\/<\/code>, so ...\/time-series\/v1\/performance\/growth\/<\/code> becomes category: 'performance'<\/code> and dataPoint: 'growth'<\/code>. Categories include performance<\/code>, fees-expenses<\/code>, portfolio-holdings<\/code>, and many others with more to come in the future. performanceId<\/code> is the default idType<\/code>, so you can omit it, and currencyId<\/code> takes an ISO 4217 code – worth setting explicitly when you compare funds domiciled in different markets, since it otherwise defaults to each investment’s own base currency.<\/p>\n\nDate<\/code>, holding yyyy-MM-dd<\/code> strings sorted ascending. Request one security and the values land in a Value<\/code> column; request several and each is suffixed with that security’s performanceId<\/code> – always the performanceId<\/code>, whatever idType<\/code> you asked with. The same pairing works here, with x<\/code> taking the date column instead of name<\/code>:<\/p>\n\nHighcharts.stockChart('container', {\n dataTable: growthConnector.getTable(),\n series: [{\n name: 'Capital Group Global Equity Fund (LUX) B',\n dataMapping: { x: 'Date', y: 'Value_0P00000FIA' }\n }, {\n name: 'Dodge & Cox Stock Fund Class I (DODGX)',\n dataMapping: { x: 'Date', y: 'Value_0P00002PB8' }\n }]\n});<\/code><\/pre>\n\nyyyy-MM-dd<\/code> strings into dates for you. Note the different bundle: a time series wants highstock.js<\/code> rather than the highcharts.js<\/code> we loaded in Step 1.<\/p>\n\nTwo things that will save you time<\/h2>\n\n
api.json<\/code> option that bypasses authentication and the network entirely, using a payload you supply. It takes priority over postman<\/code> and online API settings, which makes it ideal for local development, demos, and tests where you do not want to burn API calls:<\/p>\n\nconst connector = new HighchartsConnectors.MorningstarDWS.InvestmentsConnector({\n api: {\n json: {\n AssetAllocationBreakdown: {\n assetAllocationBreakdown: {\n assetAllocCashPercLong: 4.49556,\n assetAllocEquityPercLong: 95.50442\n },\n identifiers: {\n performanceId: '0P00000FIA'\n },\n metadata: {}\n }\n }\n },\n security: {\n id: '0P00000FIA'\n },\n converters: {\n AssetAllocationBreakdown: {}\n }\n});<\/code><\/pre>\n\napi.url<\/code>:<\/p>\n\napi: {\n url: 'https:\/\/www.emea-api.morningstar.com\/',\n access: {\n token: 'your_access_token'\n }\n}<\/code><\/pre>\n\nhttps:\/\/www.us-api.morningstar.com\/<\/code> (Americas, the default), https:\/\/www.emea-api.morningstar.com\/<\/code>, and https:\/\/www.apac-api.morningstar.com\/<\/code>.<\/p>\n\nUsing the connectors with Dashboards<\/h2>\n\n
MorningstarDWSInvestments<\/code> and MorningstarDWSTimeSeries<\/code>:<\/p>\n\nDashboards.board('container', {\n dataPool: {\n connectors: [{\n id: 'equity-sectors',\n type: 'MorningstarDWSInvestments',\n api: {\n access: {\n token: 'your_access_token'\n }\n },\n security: {\n id: '0P00000FIA'\n },\n converters: {\n EquitySectorsBreakdown: {}\n }\n }]\n }\n \/\/ ...gui and components\n});<\/code><\/pre>\n\ndataTableKey<\/code>, so a Grid or chart reads the connector’s output the same way the chart above did – here you would get tables named EqSuperSectors<\/code>, EqSectors<\/code>, or EqIndustries<\/code>.<\/p>\n\nMore details and licensing<\/h2>\n\n