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 }}}}
Related
I have a chart series data that ends with a not-rounded value (e.g 5.5).
The xAxis type is category and I want the last tick label to disappear.
I must use category type because I need the tickmarkPlacement attribute set to "between".
I tried to set endOnTick to false but it seems like it doesn't apply on category type.
$(function () {
var settings =
{
"chart": {
"type":"line"
},
"xAxis": {
"type": "category",
"endOnTick":false
},
"series":[
{"name":"series1","data":[[1,1200],[2,2200],[3,3200],[4,1800],[5,1500]]},
{"name":"series2","data":[[1,1050],[2,2050],[3,1650],[4,1450],[5,1350]]},
{"name":"series3","data":[[1,1250],[2,2250],[3,1850],[4,1650],[5.5,1550]]}]
}
var chart = $('#container').highcharts(settings);
});
That's how the chart looks like:
And I want the "6" category label to disappear.
Link to simplified example: http://plnkr.co/edit/EleA25vPiTQ3EwFa
EDIT - My chart has a scrollbar, so if I use showLastLabel: false,
it hides the currently displayed last label, even when the scrollbar is not at the end.
You can set the showLastLabel to false to hide it.
"xAxis": {
"type": "category",
"endOnTick":false,
showLastLabel: false
},
Demo: http://plnkr.co/edit/5WRJIeGFyiUzRiGF?preview
API: https://api.highcharts.com/highcharts/xAxis.showLastLabel
I am trying to change the sliced point colour on pie chart. When it is drilled down, the colour couldn't be changed using the select function on the slice. The colour is always changed back to the colour of its parent slice.
For example, when a green slice is clicked on the parent chart to drill down, whatever slice clicked on the child chart will change to green, even though I tried to change it to yellow in the select event which is set in plotOptions. But unselecting it will change the colour to yellow, by clicking another slice.
It seems like a bug to me.
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. November, 2013.'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
allowPointSelect: true,
point: {
events: {
select: function() {
this.update({color: 'yellow'});
}
}
},
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: brandsData
}],
drilldown: {
series: drilldownSeries
}
});
Here is the fiddle.
In the current version of the Highcharts (Highcharts Basic v7.2.1) everything is working properly.
I'm a bit late on this one, but this is a known issue of Highcharts. Instead of using the select event, use the selected and unselected events. There is a subtle difference here, as using select will often not fire directly after a click. These two events however are more reliable.
https://api.highcharts.com/highcharts/plotOptions.pie.point.events.select
https://api.highcharts.com/highcharts/plotOptions.pie.point.events.unselect
I have found this jsfiddle very helpful when I started working on paginated highchart columns. On top of this good example, I would like to know how I could change the x-axis labels into each data's corresponding name. (Ex. Along the x-axis, we should find the names of 'Fred G. Aandahl', 'Watkins Moorman Abbitt', 'Amos Abbott', etc. with their corresponding y-values and must change accordingly when the "Next" button is clicked.)
I have tried adding "xAxis" option inside the highcharts portion but still had no luck.
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
formatter: function(){
return this.value;
}
}
},
series: [{
data: []
}]
});
and
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
labels: {
format: '{value}'
}
},
series: [{
data: []
}]
});
Can someone help me regarding on what I am missing in this example? It will be very much appreciated.
You can set type of xAxis to category and without category array the value in axis will be taken from the point. But you will need to change your setData call to
pie.series[0].setData( data.slice(from, to), true, true, false );
xAxis: {
type: 'category'
},
Example: http://jsfiddle.net/kpxp4/8/
I am able to change the x-axis labels accordingly by adding
pie.xAxis[0].update({
categories: category.slice(from, to)
})
after the setData call, where category is an array of all the x-axis labels that you want to display in correspondence to each y-axis value. Moreover, the
xAxis: {
type: 'category'
}
portion, as suggested by #Kacper Madej, works for the specific data format given originally. However, the pie.xAxis[0].update() could be used on a more general sense given that you know the array of x-axis labels that you want to use (regardless of the data or series format that you have).
Here is the link to the jsfiddle.
Hope this could be of any help, too.
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.
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
},