In my browser (Firefox 12), this example of a Highcharts Chart looks not correct. The labels are not styled in the same radius as the background radius is.
Is there any option in Highcharts to fix this?
Thx in advance.
Yes, there are options on the label that will fix this. If you format the label according to the below code the label should arc properly around the gauge.
labels: {
step: 2,
rotation: 'auto',
align: 'center',
distance: 15,
x: 0,
y: 0
},
I updated your jsfiddle to demonstrate. You were missing the x and y position offsets.
Related
In Highcharts, I know you can put your tooltip in a fixed position using:
tooltip: {
positioner: function () {
return { x: 50, y: 50 };
},
},
But how would I center it in the same way that margin: 0 auto would center it? I am trying to get the tooltip text to stay in the middle of a donut chart. The solution is probably something obvious but I have yet to figure out what it is. Thanks in advance!
You can make use of chart plotHeight and plotWidth to get access to current chart height and width and adjust the tooltip x and y accordingly as below:
positioner:function(){
return { x: chart.plotWidth/2, y: chart.plotHeight/2 };
}
A working demo here: https://angular-raebwk.stackblitz.io
I use this activity gauge highchart graph. But, when I resize it. The layout become a mess. In this fiddle, I change the height and width of the graph. But, the label is misplaced.
chart: {
type: 'solidgauge',
marginTop: 50,
width:700,
height:700
},
You must to update tooltip and stroke position according to you new chart width and height like this :
tooltip: {
...
positioner: function (labelWidth) {
return {
x: 350 - labelWidth / 2, // edited
y: 320 // edited
};
}
}
Updated fiddle
I want to update x and y dataLabel parameters of the specific point. Is it possible to do in highcharts?
I tried to update point like this. But this didn't work as I expected.
chart.series[0].points[1].update({
dataLabels: {x: 20, y: -20}
});
Here is jsfiddle:
https://jsfiddle.net/chermio/0973fcwb/1/
As I have mentioned in my comment
In pie chart it is possible to update dataLabels.distance option:
http://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.distance
function(chart) {
chart.series[0].points[1].update({
dataLabels: {distance: -10}
});
}
Live example: https://jsfiddle.net/0973fcwb/4/
I'm new with charts, so I have created a google charts lines, and I need to change background color for some range as seen in the picture below.
my code so far is pretty basic and looks like this:
var options = {
vAxis: {
viewWindow: {
min: 0,
max: 100
},
ticks: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
}
};
how can I change background color for example from 0 to 20 in my vAxis to look like this
After some intensive research, I found the solution that lies on this link Google line chart(interactive) api - how we fill different background colors on specified areas
I am trying to put together a bar chart in C3.
http://jsfiddle.net/michaelkuzmin/Lcxe0frw/9/
var chart = c3.generate({
data: {
columns: [
['% Women CS', 0.036, 0.095, 0.105, 0.182, 0.121],
['% Women Math', 0.182, 0.077, 0.182, 0.026, 0.097],
['% Women Comp Eng /EE', 0.039, 0.074, 0.032, 0.095, 0.087]
],
type: 'bar',
labels: true
},
axis : {
y : {
tick: {
max: 0.50,
min: 0,
// padding: {top: 0, bottom: 0}
}
},
x: {
type: 'category',
categories: ['Carleton', 'Alberta', 'Sherbrooke', 'McGill', 'Laval']
}
}
});
1) When I enable value labels the Y axis immediately breaks by setting the max range to 14
2) When I try to set it manually it ignores the Y: max min parameters.
What am I missing?
P/S Somebody posted a very similar question here c3.js y axis min/max not working
but the solution they posted does not work for me. The solution was to use padding = 0. You can uncomment it in the fiddle and see that it makes no difference.
The documentation on c3.js is pretty poor, but it seems that the max and min don't belong in the y.tick object, but directly in the y. Moving them, and then applying the padding to the y as well, seems to resolve the issue. See updated fiddle here.