I'm having trouble with highcharts downloading PNG image, I want to use my own button instead the highcharts one, reading the documentation I need to use "exportChart" function, but it removes data:
options:any = {
exporting: {
enabled: false
}
}
exportPNG():void{
this.chart.exportChart();
}
There is an "almost working" example it gives an error in app.module using "require" and another one when tyring to import from exporting, help in make the example work will be apreciate
https://stackblitz.com/edit/angular-dqck8n
When it's working, we can click in "download button" and downloads the chart, but if click again it returns an error because data is removed from chart.
I've realized it also happen using exporting library, you can check it download image file and trying to do zoom out.
The reason is saveInstance method - it is called on every chart's load. When exporting, a new temporary chart is created and then deleted so now your angular component has the reference to the removed exported chart - this.chart inside exportPNG() refers to the empty chart object.
You can check if load event is called for a normal chart and then save the chart's instance.
saveInstance(chartInstance): void {
if (!chartInstance.options.chart.forExport) this.chart = chartInstance;
}
live example: https://stackblitz.com/edit/angular-41tmjd?file=app/mychart.component.ts
Related
Consider the following toy example: jsfiddle
chart: {
events: {
render: myfunc
}
},
...
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
The intended behavior is to set the state of the first series as hover while setting all other series as inactive after load and redraw events.
The code works as intended after load
However, it doesn't work after redraw (via the select box). After selecting an option in the box, the series are rendered as normal instead of as inactive UNLESS any series had been previously hovered. That is, the code works if you interact with any series AND THEN select an option in the box, but it doesn't work if you select an option in the box immediately after the loading without interacting on the series.
Surprisingly, after some inspection in the console, I noted that in any case the intended states are properly passed to the series object. So, why the states are not properly rendered?
*NOTE: In my actual application the hovered series is not necessarily the first one, but it varies depending on the output of other function. I'm aware that "myfunc" could be simplified in the current example, but for general purposes please suggest an answer keeping the basic structure if possible.
This seems to be related to this issue from HighChart's GitHub. In your case, HighCharts is correctly updating the series' state. However, while rendering it fails to set the proper opacity value associated with the 'inactive' state. The workaround is to explicitly set the opacity of the series to the same value it should have in the 'inactive' state.
// F U N C T I O N S E T S T A T E
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
//explicit opacity
s.opacity = 0.2;
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
Thank you for sharing this issue, it seems that it is a regression after the last release.
In the previous version it used to work fine: https://jsfiddle.net/BlackLabel/Lbpvdwam/
<script src="https://code.highcharts.com/8.1.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.0/highcharts-more.js"></script>
I reported it on Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/13719
If you don't need any new features/bugfixes use the previous version as a temporary workaround.
I'm using react-highcharts and I'm trying to find a way to trigger an event when one of the Y-axis categories is being clicked. I'm using xrange graph.I want to get the offset of the value that was clicked. For example, if i have:
CatA
Catb
CatC
If I will click on CatB I will get 1.
I found a jquery solution, which give me the value itself. Its not a problem to get all the elements and iterate over them and found the offset myself. The solution of jquery:
$("#container .highcharts-yaxis-labels text").click(function() {
alert($(this).text());
});
I'm looking for react/react-highcarts solution for that.
Update
Thanks Kamil Kulig! Im getting trouble with the library. I import the library as
import HighchartsCustomEvents from 'highcharts-custom-events';
And nothing happned, also i added this code at componentWillMount function:
template.yAxis.events.click = function () {
alert(1);
};
I saw the docs and I didnt find any offset function, which means that sould I use jquery anyway? or do u have any idea?
Highcharts offers the custom events module that is able to handle the actions that you require.
Module reference on npm: https://www.npmjs.com/package/highcharts-custom-events
Module reference on Highcharts website: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events
Sample code:
yAxis: {
labels: {
events: {
click: function () {
// do something
}
}
}
}
I am working on Highcharts highmaps rich information on click chart.First time load the information by json array and its working fine.But when I am filter data using filters and load chart again it`s give me same error array.prototype.foreach called on null or undefined highcharts at below lines.What is solution for this?
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
var points = mapChart.getSelectedPoints();
Below link I am using as reference:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/rich-info/
I will answer this question in case someone else bumps into this problem in the future (even though I saw your problem is solved in github).
I encountered this issue with Highcharts when resizing the website (having 2 pie charts and one bar graph). I managed to solve it by wrapping the initialization of the graphs in a document.ready:
$(() => {
controller.initializePieHighChart();
controller.initializeBarHighChart();
});
Using latest HighStock/HighCharts we are creating charts with this syntax:
$('#container').highcharts({...
We then allow the user to do some manipulation of the chart series displayed. We added the ability for the user to reset the chart back to how it was originally. We are using this method:
function forceResetChart(chart) {
var opts = chart.options;
chart.destroy();
chart = new Highcharts.Chart(opts);
}
This does reset the chart and we are able to make changes again. However, we are keep getting errors thrown in the console:
TypeError: a.renderTo is undefined # .../JavaScript/HighStock/highstock.js:198
How can we still use the cleaner syntax ($('#container').highcharts({...) and not get this error thrown?
Example jsFiddle.
option 1) Just make sure you still specify "renderTo:'container'" in the chart properties.
Or, if you don't want to include in the initial chart code, add it to the options in your forceReset function.
option 2) in your forceReset function, use the same '$('#container').Highcharts...' syntax to call your chart, rather than switching back to the other syntax
example of option 2:
http://jsfiddle.net/5pa7N/8/
{{edit option 3:
set options variable up front.
call chart on page load using that variable.
reload chart using that variable
http://jsfiddle.net/eYmh9/
I need to do some post-processing work on a png file of a Highchart graph. How do I determine when the export is finished? I've tried to attach a function, but it never gets called:
console.log("Saving chart...");
chart.exportChart({
type : "application/png",
filename: "tmp_chart_filename"
},
function(data) {
console.log("Export done, Data: " + data); // Not called.
})
console.log("Out");
To my understanding, it is not possible out of the box.
What happens internally in the exportChart() method is, a form is created on the fly and the chart svg is sent to the server by programmatically triggering a submit on this form. The server in turn, processes received svg into a png (or whatever you may select) and returns it to the browser.
The popup you see that asks you to "save as" is the action of the browser (and not any highchart code) when a file is thrown at it. Basically the returned png is never returned to the code, it goes directly to the browser.
You can however write your custom svg->png server module and do your magic there :)
I had a rather similar issue and solved it by defining the onclick event on the contextButton. This seems possible only if you are OK with losing the items in the context menu (export by file type), which wasn't an issue in my case. Below the code to be included in the chart initial building:
[... your Highcharts chart setup ...],
exporting: {
buttons: {
contextButton: {
menuItem: null, // You'll lose your menu items here
onclick: function(event) {
yourFunctionBeforeExport();
this.exportChart();
yourFunctionAfterExport();
}
}
}
}
[... rest of the Highcharts chart setup ...]