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.
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
using exporting(highchart) getting below error:
ERROR in src/app/desktop/module/dashboard/dashboard.module.ts(24,1): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'typeof import("C:/website/UI_Dashboard/node_modules/highchart
s/modules/exporting.src")' has no compatible call signatures.
in the module:
import {ChartModule, HIGHCHARTS_MODULES} from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as highcharts from 'highcharts';
import * as exporting from 'highcharts/modules/exporting.src';
import * as offline from 'highcharts/modules/offline-exporting';
exporting(highcharts);
offline(highcharts);
what should I do for solving this issue?
Have you tried with import exporting from 'highcharts/modules/exporting.src';?
It's the suggested way of module working as documented in the official Highcharts wrapper for Angular - https://github.com/highcharts/highcharts-angular#core
You should also load all Highcharts related files as src or minified - mixing might cause some TS issues.
An import path for src version of Highcharts core is 'highcharts/highcharts.src'.
Also (I'm not sure if this applies here since the code might not be complete), highcharts-more needs to be initialized as any other module. Usually it is loaded before other modules - initialization order is rarely important (some series types are based on optional modules) and you will get an error if the order is wrong, so it's important to test this.
In case anyone encounters this problem nowadays, changing this:
import * as exporting from 'highcharts/modules/exporting.src';
To this:
import Exporting from 'highcharts/modules/exporting';
Solved the problem for me.
I'm using Angular CLI 11.1.4 and the Highcharts npm package v9.2.2
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);
so this snippet works great when I use commonjs on my config.js
import * as Ng2Highcharts from 'highcharts/modules/map';
Ng2Highcharts(Highcharts);
but as soon as I switch to system with the following import:
import * as Ng2Highcharts from 'highcharts/modules/map';
Ng2Highcharts.default(Highcharts)
I get an error of :
ORIGINAL EXCEPTION: TypeError: x[(intermediate value)(intermediate value)(intermediate value)] is not a constructor
ORIGINAL STACKTRACE:
not sure why config.js switching from cjs to system breaks this,
Thanks
Sean