I am creating a highcharts. But when the chart finishes loading, i can see 3 buttons for context menu and only one of them functional. Please look at the image:
I have just included these script tags in the html:
src="http://code.highcharts.com/highcharts.js"
src="http://code.highcharts.com/modules/exporting.js"
Try to add the exporting options :
var chart1 = new Highcharts.Chart({
chart: {
// ...
},
exporting: {
buttons: {
contextButtons: {
enabled: false,
menuItems: null
}
},
enabled: true
},
// ...
to your charts options. It seems that it could resolved your problem.
EDIT : I just editing the code, try it.
Related
Dears, I am new to Rails development, and now try to use Chartkick to show a pie chart.
I uses Highchart by adding require highchart in application.js. Everything goes well except the data labels. I try to hide them but they are always there.
The original code is like:
new Chartkick.PieChart("changepie", {"WithoutChange":<%=#count_noChange%>,"WithChange":<%=#count_change%>}, {"colors":["#FF9900","#3366CC"]});
As answered in this post, I added
new Chartkick.PieChart("changepie", {"WithoutChange":<%=#count_noChange%>,"WithChange":<%=#count_change%>}, {"colors":["#FF9900","#3366CC"]}, {"library": { "plotOptions": { "pie": { "allowPointSelect": true, "cursor": "pointer", "dataLabels": { "enabled": false}, "showInLegend": true}}}} );
But the data label is still there?
Could you please advise how to specify the options when creating a pie chart to hide data label?
Thanks!
pie_chart data, library: {plotOptions: { pie: { dataLabels: { enabled: false }}}}
In my code, I am loading many files during navigation of chart but i want to include feathure like zoomType and hover and mousever on some specific files. For example, i am changing zoomType='x' of chart by reading sample.json file.
$(function() {
var chart;
var options = {
chart : {
type : 'polygon',
renderTo : 'container',
zoomType:''
},
title : {
text : ''
},
credits: {
enabled: false
},
$.getJSON('sample.json', function(data) {
options.series=data;
options.chart.zoomType='x'; /*including zoom feature only for sample.json file*/
var chart = new Highcharts.Chart(options);
});
But this code does not work. How can i fix this error?
See the working demo
I am setting 'x' for default series and zoomtype 'y' for next json data (when you click plus icon), see your previous code and demo at plunker link
$("#container").html("<div style='style:margin:0 auto'>Loading Data</div>") ;
$.getJSON('data10.json', function(data) {
options.series=data;
options.chart.zoomType='x';
chart = new Highcharts.Chart(options);
});
Highcharts upgraded their library to version 3. But in this version I can't capture the mouse's right click like before:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container-chart-1',
zoomType: 'xy'
},
(...),
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e) {
alert('LEFT CLICK YEAH!');
},
contextmenu: function (e) {
alert('RIGHT CLICK NOT SO YEAH!');
}
}
}
}
}, (...)
I'm still on version 2 since I cannot make it to work.
Ideas and thoughts would be much appreciated?
It's interesting, I was sure that setting context menu in that way doesn't work since 1-2years. Now, possible way is to add custom events using Element.on(), for example:
for(var j in chart.series){
var series = chart.series[j];
for(var i in series.data){
(function(i){
var point = series.data[i];
if(point.graphic){
point.graphic.on('contextmenu', function(e){
// show your context menu
});
}
})(i)
}
}
I've using Highcharts 2.3.5. In the "exporting' object, under "chartOptions", I'm able to change some things when exporting, like the background color of the chart, but I haven't been able to enable the dataLabels nor change the marker size.
Here's an example, of what works and doesn't work. In this case, when exporting, I want to change the background color (which works) and make sure the data labels appear (which doesn't work) :
...
exporting : {
chartOptions : {
chart: { backgroundColor: '#ff0000'}, //this works
plotOptions: {
pie : {
dataLabels: {enabled: true} //this one doesn't work
}
}
}...
Am I missing something obvious?
j
$('#container1').highcharts({
exporting: {
chartOptions: { // specific options for the exported image
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
}
},
scale: 3,
fallbackToExportServer: false
},
I am building a Dashboard and it has around 4 graphs on a row and on click of any graph i want to update another graph which is bigger in size to display the graph so that its visible to the user to analyze.
any idea how to Redraw the map on click on a button.
I did the similar thing on my project.
You can add one button zoom/popup, clicking on which would open a new big chart and disable the exporting buttons in this new chart.
Here's the full code.
function callback($this) {
var img = $this.renderer.image('images/zoom_icon.png', $this.chartWidth - 40, 5, 40, 12);
img.add();
img.css({
'cursor': 'pointer'
});
img.attr({
'title': 'Pop out chart'
});
img.on('click', function () {
var params = {
chart: {
spacingLeft: 100,
spacingRight: 100,
renderTo: 'myChart'
},
title: {
text: 'title'
},
exporting: {
buttons: {
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
}
}
}
new Highcharts.Chart(params, function (chart) {});
})
}
new Highcharts.Chart(charts.params, callback);
// where charts.params is object which contains options for chart