I'm struggling to understand why when you click on the chart the number in the middle does not get updated until the user moves their cursor after the chart has been clicked upon.
onClick: function(event, chart) {
var index = chart[0]._index;
var value = ~~percentages[index];
chart[0]._chart.config.options.elements.center.text = value;
},
https://jsfiddle.net/uL8L5ny9/
I've created a JS fiddle where you can see this happening.
From my experience this is a problem in Chrome and FF so far.
I am actually using NG2 charts on my project but the JS fiddle using just chart.js is doing the same thing.
I haven't found much on the internet about this issue.
Forgot to draw/update the chart on load. Using the chart.chart.update() fixes this.
Related
I'm trying to show huge series of work breakdown structure data from an API into GanttChart so it increase page loading time and becomes unresponsive sometimes. I think one of the solutions could be get data in lazy mood. I googled it and found this link on GitHub:
https://github.com/highcharts/highcharts/issues/14232
unfortunately I'm new in HighCharts and JavaScript and it seems it doesn't works or maybe I can't figure out how it works. The ideal scenario would be fetch child tasks within a series every time the parent is expanded.
I would appreciate any ideas.
You can simply add a click event on label and labelIcon SVG elements:
chart: {
events: {
load: function() {
const chart = this;
const ticks = chart.yAxis[0].ticks;
for (let key in ticks) {
if (ticks[key].treeGrid.labelIcon) {
[ticks[key].label, ticks[key].treeGrid.labelIcon].forEach(
element => element.on('click', () => handleLabelClick(ticks[key]))
);
}
}
}
}
But unfortunately, the stairs begin next. Currently, Highcharts gantt charts dont't play well with dynamic data, mostly because of this reported bug. The only way for now, but not very optimal, seems to be creating a new chart with partial data on each expand action.
Live demo: https://jsfiddle.net/BlackLabel/c8whg3kv/
Hello I have been looking for the a full screen functionality for chart in highchart. I have been referring the site and got this link.
Here in javascript you can achieve this by simply handling click event like
document.getElementById('button').addEventListener('click', function () {
chart.fullscreen.toggle();
});
I have tried the same thing for angular highcharts :
ngOnInit(){
this.progressChart = Highcharts.chart(this.donutContainer.nativeElement, this.donutOptions, () => {
/*
Do things here after chart is drawn
*/
})
}
onFullScreenClick(){
this.progressChart.fullscreen.toggle()
}
But seems like this code is not working. I somewhere read you can also use toggleFullScreen(). But that is also not feasible.
Fullscreen requires the fullscreen module, so if you did not imported and initialized that might be the reason.
import HC_fullscreen from 'highcharts/modules/full-screen.js';
HC_fullscreen(Highcharts);
I have prepared a simple demo for you to show you the possible solution. I am using the official highcharts-angular wrapper there (I am encouraging you to check it out, it might make your life easier while working with highcharts in angular), but the solution made without the wrapper should be similar.
Docs:
https://github.com/highcharts/highcharts-angular
Live demo:
(note - the fullscreen will not work inside the stack-blitz frame, but the following example will work in the real-life project)
https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx?file=src/app/app.component.ts
I'm trying to open highcharts on new browser windows so i'm doing something like this.
let chartWindow = window.open("", "_blank", "left=0,top=0,width=600,height=450");
let chartContainer = $("<div />", {
class: "chart-container"
});
$(chartWindow.document.body).append(chartContainer);
Highcharts.chart(chartContainer[0], chartOptions);
But if more than one window is open and if you try to zoom on other windows apart from the first one the click get stuck. Seems like some event is not firing properly. So if you try to select the chart to zoom it gets stuck and you have to go to the first chart that was opened and click there to fix it. I'm sure is because of opening the charts on new windows but i need to do it.
What could be the problem here?
Edit: code sample
This problem looks like a bug, so I reported it on Highcharts github: https://github.com/highcharts/highcharts/issues/9748
As a workaround you can edit Highcharts Pointer methods setDOMEvents:
if (!H.unbindDocumentMouseUp) {
H.unbindDocumentMouseUp = [];
}
H.unbindDocumentMouseUp.push(addEvent(
ownerDoc,
'mouseup',
pointer.onDocumentMouseUp
));
and destroy:
H.unbindDocumentMouseUp.forEach(function(unbind) {
unbind();
});
Live demo: http://jsfiddle.net/BlackLabel/cxz7hugp/
I´m using the ng-highcharts with angularjs.
I have two ways of manipulating the Extremes in my chart:
1. When I´m in the chart selecting or using the navigator.
In the config-Object:
xAxis: {
events: {
setExtremes: function(e){
if(e.trigger) {
console.log(e.min);
}
}
}}
and 2nd (when i press a button and want to manipulate through a button):
var chart = Highcharts.charts[0];
chart.xAxis[0].setExtremes(start, end);
Now the problem is that The 2nd function is destroying the first one.
Means: The first one is working and giving me e.g. the min-value via e.min, but when calling the 2nd function and I want to trigger events in my chart again, the e.min is null (NaN).
Can someone help me, I need both possibilities.
Hi I have a requirement where I have to move the handles of two highstock chart same time. So that if handle of any one of them is moved , then the handle for second chart gets re positioned accordingly.
JS fiddle is set up here Fiddle
Relevant code is something like
//callback function to set event
function(chart){
Highcharts.addEvent(chart.xAxis[0], 'setExtremes', function (e) {
var allRelatedChartsDiv = $("[data-identifier = '"+identifier+"']").not(chart);
$.each(allRelatedChartsDiv ,function(index,graphContainer){
var chartObj = $(graphContainer).highcharts();
chartObj.xAxis[0].setExtremes(parseFloat(e.min),parseFloat(e.max));
});
});
});
Suggestions ?
You can develop / adapt this example: http://jsfiddle.net/Gv7Tg/33/ which allows to synchronise charts by using setExtremes()