error thrown by highchart-more library while clicking on print chart (exporting button).
i'm trying to export (print chart) a columnrange graph.
Even i found that the demo example on highchart is also throwing the same error.
https://www.highcharts.com/demo/columnrange?cf_chl_jschl_tk=75ef57b90426bb8711968566eb4df741cf64c9a6-1591202845-0-AZwTKQgqzxGQZDW-Rq4JOgEgcwcOmwgfRMadAmbWU1-gwfLNp3h-bTchWfh2zFIRQTkOHFAlxZTshcL9Zn5dvQqDHGY7VRsSpCOoL-tzk-fkIW2gwOt7DrGyZSWjuljLg-CvjjO2Z87if54GYlLmpeVuDHpL-5Vfl0mleCW0U8WdHUjmRyswY_332RrXJxtjoJhCBqY0AYpW9NnDXfK7Kl6dRkat5Roeeso4bEjY2hkWnylV7Eo0K7BxzEBPDAXQZZLionI8SGtXNon3v12b3MBE_TwsReW9JfaECbtlnzDmWnq4PA1G8u_hWU7B8pYEx9LQ9r40INKMVf1Jdkcsf_H6CMmZ6C211e9cvI06KHhP
This is a Highcharts bug that is reported here: https://github.com/highcharts/highcharts/issues/13575
The issue is resolved and the fix will applied in the next version. As a workaround you can use the code from master or some previous version:
<script src="https://code.highcharts.com/8.0.4/highcharts.js"></script>
<script src="https://code.highcharts.com/8.0.4/highcharts-more.js"></script>
<script src="https://code.highcharts.com/8.0.4/modules/exporting.js"></script>
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5019/
Highcharts file service: https://code.highcharts.com/
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'm having trouble forcing highcharts to export offline. I've added the offline-exporting.js module along with the exporting module. I've set the fallbackToExportServer to false, but I still go to the highcharts server (https://export.highcharts.com/) and get this error: 13 Request Entity Too Large.
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/data.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
exporting: {
filename: title,
fallbackToExportServer: false,
To see the issue, go to: https://www.nrel.gov/transportation/drive-cycle-tool/
In the Drive cycles table, search for “Fleet DNA”.
Click on “Fleet DNA Drayage Maximum Energy*”
Scroll up and click “Download Drive Cycle Data or Image” under the chart.
Choose “Download JPEG image”
Some data sets work fine.
It is linked to this reported issue:
https://github.com/highcharts/highcharts/issues/4614
As a workaround you could set up a custom exporting server with increased size limit:
https://www.highcharts.com/docs/export-module/setting-up-the-server
I noticed the same issue few days back, kind of strange, despite setting the flag to false, it was calling the highchart server for chart pdf.
I then resorted to use exportChartLocal method of highchart chart instance:
chart.exportChartLocal({
type: 'image/jpeg', // replace with image/jpeg
filename: 'test.jpg',
fallbackToExportServer: false,
sourceWidth: 900,
scale: 1,
});
Look at this example: https://jsfiddle.net/riteshwaghela/huw8e31z/7/
we have been trying to implement Highcharts organization charts into our system. However, we encountered some problems while testing with our data:
• Some nodes are displayed incorrectly. The data is shown in the tooltip while hovering over the node, but the node itself is blank.
• The connecting lines between the nodes are displayed incorrectly. This seems to be a problem with highcharts.css, as removing it fixes the display issue.
Here you can find an example of our build:
Code: https://jsfiddle.net/more_paeg/0b52hajt/28/
Please let us know what we can do to resolve these issues.
regards, Bianca Medek
Referring to the comments - thank you for sharing the picture. That's how you chart looks like on my device: https://imgur.com/a/1iJwC89
I think that it might be a problem related to this bug (which has been already fixed and will be available in the npm after the next release): https://github.com/highcharts/highcharts/issues/13100
Try to use suggested workaround - Setting the series.dataLabels.allowOverlap forces labels to be displayed.
Demo: https://jsfiddle.net/BlackLabel/4dskhf6r/
plotOptions: {
series: {
dataLabels: {
allowOverlap: true
}
}
}
API: https://api.highcharts.com/highcharts/series.pie.dataLabels.allowOverlap
For my current project, I need to fetch data from the server and update the chart with a seperate navigator series data. When I do this, the diagram itself is shrinking, each time I call
chart.update({
navigator: {
//actually it doesn't matter what is written here
}
});
It looks like it shrinks exactly as much space as would needed for another navigator.
See this jsFiddle
It's already fixed on a master branch of Highcharts repository. In order to use the newest version of library please change links from:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
to:
<script src="https://github.highcharts.com/stock/highstock.js"></script>
<script src="https://github.highcharts.com/modules/exporting.js"></script>
You can use those links until the new release comes out (what should happen this week), but we don't recommend using GitHub version on production enviroment.
Live example: http://jsfiddle.net/pavnLexd/
I am using HighCharts version 3.0.2. Have set up the Highcharts server locally for exporting the charts. When download as png/jpeg/pdf is selected from the top right corner of the chart , the Highcharts demo page is displayed.
Please let me know what could be the reason for this.
Note: Have set the Phatom js path in my app.properties file of highcharts export server.
Probably you're exporting.urlends without a trailing slash. The export-server will redirect the GET (without trailing slash) to the demo/welcome page
Instead of
exporting: {
url: http://localhost/export
}
do this
exporting: {
url: http://localhost/export/
}