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();
});
Related
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();
}
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 am trying to use chart js library and build range selector..
i have iuncluded all library..
but still range selector not showing upo...
can you guys tell me why its not showing up...
proving my fiddle below...
its nopt workimg for this code..
http://jsfiddle.net/TRjGa/11/
$("#rangeSelectorContainer").dxRangeSelector({
//...
scale: {
//...
label: {format: 'shortTime'}
},
sliderMarker: {format: 'shortTime'}
});
I'm not sure what the result should look like, but you can't put the JS code inside the html in jsfiddle.
If I put it like this, there is at least smth. showing up =)
$("#rangeSelectorContainer").dxRangeSelector({
//...
scale: {
//...
label: {format: 'shortTime'}
},
sliderMarker: {format: 'shortTime'}
});
http://jsfiddle.net/v5LTM/
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();
}
}
}
}
},
anyone experienced this? I am new to this so I am not sure exactly what is going on here. But I am trying to use jqplot's meter gauge per documentation and it doesn't seem to be working. I can create bar, line, etc graphs just fine.
include the necessary script link (as well as the others needed):
<script type="text/javascript" src="../plugins/jqplot.meterGaugeRenderer.min.js"></script>
markup
<div id='chart6'></div>
js
$(document).ready(function () {
plot6 = $.jqplot('chart6', [[18]], {
title: 'Network Speed',
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'MB/s'
}
}
});
});
firebug says:
TypeError: c.jqplot is undefined - inside the meterGaugeRender js file.
any help would be greatly appreciate as always.
It looks like you did not include the basic jqPlot library, just the meter gauge add on.