CodeSandbox
When I try to change chart data with the top panel — it works, but when I hover on chart it changes data repeatedly. Why is this happening?
For example click on the 'week' and after that hover on the chart below.
I was watching the CodeSandbox that you gave, and I see that you have the tooltips intersect with value : false and that I think it will use the tooltip mode all the time, and not when you want soo try to put it like this and see if it works:
tooltips: {
mode: "index",
intersect: true
},
Sugestion:
Add this to renderLi(refering to CodeSandbox sample)
onMouseOver={() => {
this.setState({ selectedIdx: key });
this.props.itemKey(key);
}}
I added chart to global scope. If chart exists and is not equal null ⇒ it will be destroyed. Corresponding flickering was vanished
if (window.eChart && window.eChart !== null) {
window.eChart.destroy();
}
Related
I am creating a map-based application using the angularjs library ng-map and have encountered a rather strange bug.
I have the following code:
script.js
vm.showMarker = true //Boolean to toggle marker
vm.toggleMarker = function(){
if(vm.map.getZoom()>=12){
vm.showMarker = true;
} else {
vm.showMarker = false;
}
$scope.$apply();
}
html
<ng-map on-zoom-changed="vm.toggleMarker()" zoom="9">
<custom-marker>
<div ng-show="vm.showMarker">
...
</div>
</custom-marker>
</ng-map>
The idea is that the marker should only be visible if the map is zoomed enough.
If vm.showMarker is set to true from the beginning like above, the marker is first visible when the page is loaded, it then dissapears when zooming until zoom is >= 12 as expected.
However if i set vm.showMarker to false so that it is not visible from the beginning, it does not become visible either when zooming in.
Any idea on what might be causing this behaviour?
Try using ng-if instead:
<custom-marker ng-if="vm.showMarker">
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.
I'm working with highcharts and amCharts, but I'm stuck in this little thing.
So, I have a drilldown piechart made with amCharts, like this one: http://jsfiddle.net/api/post/library/pure/
But I wanted another feature! After "drilling-down", I would like to select one particular combination and navigate to another page (where I would give some information to the user concerning such combination...)
So, click once in pie chart => go to subtypes. Click again in a subtype => go to a page of my choosing!
I've tried using this answer, but somehow it does not work with this drilling down feature!
// add click listener
chart.addListener("clickGraphItem", handleClick);
I'm a bit lost, is this because the drill down already uses a addListener? Can you give me a hand, please?
Here you go:
chart.addListener("clickSlice", function (event) {
// if dataItem.dataContext.id, this is the
// event before drillDown
if (event.dataItem.dataContext.id != undefined) {
selected = event.dataItem.dataContext.id;
}
else { // click event on subtypes after drilldown occurs
selected = undefined;
// PUT YOUR CODE HERE
}
chart.dataProvider = generateChartData();
chart.validateData();
});
Ok, let me explain :)
I have right now one chart with 4 lines, when I open the chart only one of it is by default visible.
Each of the lines has a flag attached to it, the problem is: when the line is not visible the flag appears at the bottom of the chart.
I found the command to make the flag visible or not, but the problem is, unlike the lines when I click the line to appear, the flag does not appear with it.
Is there any way to make them appear together? Like then I click to show the 'Camara 4' line the flag appear together. And when I click to make the line invisible the flag turn invisible too.
Is there any function/command for it?
Thanks :)
See this fiddle: http://jsfiddle.net/bBQKv/
Make use of the show and hide events to trigger the show and hide methods for the flag series.
plotOptions: {
series: {
events: {
show: function(event) {
if (this.options.type != 'flags') {
series = this.chart.get(this.options.id + 'Flags');
series.show();
}
},
hide: function(event) {
if (this.options.type != 'flags') {
series = this.chart.get(this.options.id + 'Flags');
series.hide();
}
}
}
}
},
Is it possible to toggle chart dataLabels (enabled/disabled) on click (without redrawing the chart) much like the following:
('.inner-container').click(function() {
chart.setTitle({text: "New Title"});
});
I have tried the method below but it does not work.
('.inner-container').click(function() {
chart.setOptions({dataLabels: {enabled: true}});
});
I can't seem to find any details on how to set chart options dynamically in the documentation. If anyone could point me in the right direction then that would be greatly appreciated.
I managed to figure it out, by using the series.update() method.
chart.series[0].update({
dataLabels: {
enabled: true
}
});
Thanks for your help.
Additional solution, based on datalabels elements:
http://jsfiddle.net/eNMvw/37/
chart.series[0].hideDataLabels = false;
// Add toggler action
$('#toggler').click(function() {
chart.series[0].hideDataLabels = !chart.series[0].hideDataLabels;
chart.series[0].hide();
chart.series[0].show();
});