Angular HighCharts additional Modules

Hello,

I have highcharts integrated into my project which is fully working (column charts etc.) I would however like to use their solidguage for some customization.

I'm getting the following error when I use attempt to use it:

It's not loading /modules/solid-gauge.js how do I reference it to get it to load?

Hi @kest874,

I am afraid that we are not that familiar with Highcharts and cannot assist with this issue. You can try searching through their resources.

Let me rephrase my question/issue. I following this tutorial: Integration with 3rd party JavaScript libraries - Highcharts (radzen.com)

The Highcharts files in

project\node_modules\highcharts like below:

image

It's loading highcharts.js etc becuse my charts render. The issue is that it's not loading the js files in the "modules" directory project\node_modules\highcharts\modules

I need it to also load solid-guage.js in order for the gauge to render.

How do I accomplish this with Radzen?

I don't think this is a Radzen related issue as it seems to come from Highcharts itself. Again this is a third party library and we don't know what may cause this module to not be loaded. Do you even import it in the application?

I searched online for "Highcharts error #17" and this was the first result: https://support.highcharts.com/support/solutions/articles/44001754000-how-to-resolve-highcharts-error-17-in-highcharts-angular-wrapper-

That's the question how do I get it to include the additional file? The module exists, it's just not loaded. How does Radzen know to load highcharts.js? is it " import * as Highcharts from 'highcharts';" in the high-charts.componet.ts?

Radzen does not know that. You specify it by importing the Highcharts module in the high-charts.component.ts file.

Yes. This is how modules are imported in TypeScript. Using a third party component requires some Angular, TypeScript and NPM knowledge which is mostly covered by the linked blog post. In addition the link from the Highcharts documentation shows how to troubleshoot Highcharts specific errors.

Please bear in mind that this forum is for Radzen specific questions.

Yep I know, however asking lead me to the answer I was looking for.

Just needed to add

import HighchartsMore from 'highcharts/highcharts-more.src';
import HighchartsSolidGauge from 'highcharts/modules/solid-gauge';

HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);

after:

import * as Highcharts from 'highcharts';

sample:

Thank you for all your help!