I have been using angular5 and have install the highchart using npm install.
Now I am able to use all the chart using the same except the sankey charts.
It gives me hightchart error 17.
Please help.
In your app.module.ts file add these three lines it will will work.
import { Component } from '#angular/core';
import * as Highcharts from 'highcharts';
import * as highchartsSankey from 'highcharts/modules/sankey';
highchartsSankey(Highcharts);
Sankey chart type is a separate module, so you have to import it:
import * as Highcharts from 'highcharts';
require('highcharts/modules/sankey')(Highcharts);
Related
I am building a web app on React Js and trying too build a custom map of floors of building. I followed the article on https://www.highcharts.com/docs/maps/create-custom-maps and created an application using HTML CSS and JavaScript,https://jsfiddle.net/hop9cqxj/92/ however I want it inside of ReactJS. Whenever I paste the map options into the React JS variable. I get the error below:
Error
Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=map
The demo work's link is here: https://codesandbox.io/s/inspiring-sunset-o3pf92
missingModuleFor: map
You need to use Highmaps source code and mapChart chart constructor type.
import Highcharts from "highcharts/highmaps";
import HighchartsReact from "highcharts-react-official";
import React from "react";
const option2 = {...};
export default function DeltaSecond() {
return (
<>
<HighchartsReact
highcharts={Highcharts}
options={option2}
constructorType="mapChart"
></HighchartsReact>
</>
);
}
Also, I have noticed that Highcharts doesn't work in StrictMode from the newest React, so you can report a potential bug on highcharts-react github: https://github.com/highcharts/highcharts-react
Live demo: https://codesandbox.io/s/nifty-satoshi-xxt-xxtkp9?file=/src/components/buildings/Delta/delta2nd.js
Docs: https://www.npmjs.com/package/highcharts-react-official#options-details
I am trying to use Dumbbell chart of highcharts in react app.
As per the link below, I have imported dumbbell module.
https://www.npmjs.com/package/highcharts-react-official#how-to-add-a-module
import highchartsDumbbell from 'highcharts/modules/dumbbell';
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official';
highchartsDumbbell(Highcharts);
And wrapping the options and data in HichartsReact component as below:
<HighchartsReact highcharts={Highcharts} options={options} />
Getting below error:
Uncaught TypeError: Cannot read property 'prototype' of undefined
at dumbbell.js:16
at h (dumbbell.js:8)
at dumbbell.js:15
Could you please suggest if anything is missing here.
Notice that the dumbbell series requires also the highcharts-more package.
API: https://api.highcharts.com/highcharts/series.dumbbell
Demo: https://stackblitz.com/edit/react-xhxdyv?file=index.js
I have been searching the internet about how to add highchart patternfill in angular highcharts, but no results have been found for angular. Is there any plugin available for angular or anybody have used this in angular application? Thank you.
You need to import and initialize the pattern-fill module:
import * as Highcharts from "highcharts";
import * as patternFill from "highcharts/modules/pattern-fill";
patternFill(Highcharts);
Live demo: https://codesandbox.io/s/18xojqn50j
Docs: https://github.com/highcharts/highcharts-angular/blob/master/README.md#to-load-a-module
I am importing Highcharts and Highchart more in the following way:
import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);
After the graph loads I get the following error:
Error: <rect> attribute width: Expected length, "NaN".
Note:
not critical, yet annoying.
Trying to import highmaps and jspm, 2 days and no luck.
import * as Ng2Highcharts from 'highcharts/modules/map';
Ng2Highcharts(Highcharts);
but getting an error that Ng2Highcharts is an object, which it is, but I dont know to which method inside Ng2Highcharts do I need to pass Highcharts to???
you can checkout my config.js here:
https://github.com/born2net/studioDashboard/blob/hot-reload/jspm.config.js
and my entire class here:
https://github.com/born2net/studioDashboard/blob/hot-reload/src/comps/app1/dashboard/StationsMap.ts
here is debug snap:
any help is GREATLY appreciated,
Sean