I am trying to move my data labels inward so that they are easier to read. If there is a way to dynamically center them in the slice, that would be ideal.
I've read the docs and tried modifying the X & Y.. i've tried -50 to 50 and nothing seems to be impacting the position of these labels. Am I missing something?
var PTDLastMonthOptions = {
series: [35, 65],
chart: {
width: 300,
type: 'pie',
},
legend: {
position: 'bottom'
},
dataLabels: {
enabled: true,
offsetX: 50,
offsetY: 50
},
colors: ['#00e396', '#ff4560'],
labels: ['PAID', 'UNPAID']
};
var PTDLastMonthChart = new ApexCharts(document.querySelector("#ptdLastMonthChart"), PTDLastMonthOptions);
PTDLastMonthChart.render();
#Edit 1 - Adding codepen:
https://codepen.io/flashsplat/pen/NWzowbx
#Edit 2 - I am convinced this is a bug and have reported it as such:
https://github.com/apexcharts/apexcharts.js/issues/3537
Thanks!
Change offset in plotOptions not dataLabels https://apexcharts.com/docs/options/plotoptions/pie/#dataLabelsOffset
plotOptions: {
pie: {
dataLabels: {
offset: -10,
},
}
}
Does anyone has clue how to target specific grid line and style like in the example?
I know how to dash line with:
grid: {
strokeDashArray: 10,
},
But how can I target grid line according to the tick value?
Desired result
Only way you can do it is via css
.apexcharts-gridline:nth-child(2) {
stroke-dasharray: 10;
}
Or use annotations instead https://apexcharts.com/docs/annotations/
I have sorted it by using annotations property. Here is an example:
// Breakdown line
annotations: {
position: 'front',
yaxis: [
{
y: 3000,
strokeDashArray: 5,
label: {
position: 'left',
borderColor: 'transparent',
textAnchor: 'middle',
offsetY: -10,
offsetX: 50,
style: {
color: '#D0D4D9',
background: "transparent",
},
text: ''
}
}
]
}
Is it possible to reduce the space between the number and icon? I am using angular 8 and highchart. Below is the chart legend config.
this.legend = {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal',
symbolRadius: 0,
symbolHeight: 8,
reversed: true,
padding: 3,
itemStyle: {
color: '#000000',
fontWeight: 'normal',
fontFamily: 'Roboto'
}
};
You are searching for symbolPadding option
The pixel padding between the legend item symbol and the legend item
text.
Defaults to 5.
legend: {
symbolPadding: 1
}
https://jsfiddle.net/aswinkumar863/s5d0ry2t/
I have a website which makes use of HighCharts Solid Gauge .
There are two rows of gauges.
The first row of gauges is built as follows.
var workgroups =['WG01','WG02','WG04',
'WG05','WG06','All'];
$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'Gauge',
pane: {
// Positioning
center: ['50%', '60%'],
// img size
size: '100%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.4, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
// Title Location
y: -30
},
labels: {
style:{
color: "#000000",
fontSize: "13px"
},
// Bottom Label Offset
y: 15,
distance: -10,
}
},
plotOptions: {
solidgauge: {
dataLabels: {
style:{
color: "000000",
fontSize: "15px"
},
borderWidth: 0,
useHTML: true
}
}
}
};
// The gauges
for( i in workgroups){
if(workgroups[i] == 'All'){
header = "All";
gaugeOptions.yAxis['stops'] = [[.5, '#000000']]
}else{
header = "WG" + workgroups[i].slice(-2);
}
$('#'+workgroups[i]).highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
style:{
color: "#000000",
fontWeight: 'bold',
fontSize: '22px'
},
text: header
}
},
credits: {
enabled: false
},
series: [{
name: workgroups[i],
data: [0],
dataLabels: {
y: 40,
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">clients</span></div>'
},
}]
}));
}
}
);
and results in the following image.
This is fine, proper values, all styles fit where they are supposed to.
After doing these gauges, we then do a second row of gauges.
The (Current) Configuration for these gauges are:
var application_array = new Array(3);
application_array['Sapphire'] = 50;
application_array['Magic Bullet'] = 35;
application_array['Boris'] = 30;
$(function ()
{
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: 'Gauge',
pane: {
// Positioning
center: ['50%', '85%'],
// img size
size: '150%',
// full circle/half circle
startAngle: -90,
endAngle: 90,
// gauge coloring
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#000',
// Inner semi circle sizing
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
// Set the limits for coloring
[0.1, '#55BF3B'], // green
[0.4, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
// Outside Line buffer
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
// Title Location
y: -30
},
labels:{
y:13
}
},
};
// Build the gauges here
var license_gauges = document.getElementsByClassName('gaugeCell2');
var myLength = license_gauges.length;
for (i=0; i <myLength; i++){
var header = license_gauges[i].id;
var selector = "[id='"+header+"']";
if (header == 'Boris'){
var max_value = 30;
}else if (header == 'Magic Bullet'){
var max_value = 35;
}else if (header == 'Sapphire'){
var max_value = 50;
}
console.log(header)
$(selector).highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: max_value,
title: {
style:{
color: "#000000",
fontWeight: 'bold',
fontSize: '22px'
},
text: header
}
},
credits: {
enabled: false
},
series: [{
name: header,
data: [0],
}]
}));
}
});
Which Produces the following BAD Gauges
My Question
1) In the second row of gauges, Why is it printing 25 as max for the 2nd and 3rd gauge?
- I have tried an associate array to hold the proper value, same issue occurs
I have tried a function which returns a static value, same issue occurs
I have tried logic in the gauge creation itself, same issue occurs
I have tried writing a static value as max, and all gauges get the proper value
2) In the second row of gauges, why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?
I have tried virtually every layout configuration I can think of, but yet it stays the same issue.
When Using a static max value, this issue does not occur.
Do I need to make an individual gaugeoption for each gauge since they have different max values? I would like to use 1 gauge style for the top row and 1 gauge style for the bottom row (fatter).
A JSFiddle has been created here. There is most likely extraneous code (especially css), as I wanted to get it up and running quickly.
http://jsfiddle.net/v341z7tk/1/
Thanks for reading
Why is it printing 25 as max for the 2nd and 3rd gauge?
It isn't. That is, the max isn't 25, but the drawn axis label shows the value 25, as there is an axis tick at this value. The max value is not showing with a label.
why is it that the max Value, for the second and third gauges is inconsistently formatted with the first gauge?
The position is inconsistent because the 25 label is in varying positions depending on what the max value is. In your case it is 35 and 30 for the last two gauges.
Do I need to make an individual gaugeoption for each gauge since they have different max values?
No. From my understanding you want a label at the start (0) and end (max_value). To get this you need to ensure that the axis ticks (which have associated labels) are at these positions, and only these.
A simple way is this (JSFiddle):
yAxis: {
min: 0,
max: max_value,
tickPositions: [0, max_value], // Ensure position of ticks, which have labels
// ...
}
I was having the same issue, but following what Halvor Strang said solved my problem like so
displayOptions.yAxis.min = widget.display.minimum;
displayOptions.yAxis.max = widget.display.maximum;
displayOptions.yAxis.tickPositions = [widget.display.minimum, widget.display.maximum];
distorted labels
- Minimum and maximum out of place
I've been trying to remove the margin and the padding from an HighCharts semi-circle-donut.
I've tried both with margin: [0,0,0,0] and all the different four spacing properties. I've also tried to set the size property of plotOptions to 100%.
I've created a jsfiddle http://jsfiddle.net/W7bXw/1/ to demonstrate the issue and the options I've tried. As you can see there're still huge paddings between the semi-circle and the container.
The funny thing is that setting either margin or spacing to 0 works on regular pies from HighCharts.
UPDATE:
According to the accepted answer the solution for this chart is to use negative margin together with an explicit height for the container.
this should help you: http://api.highcharts.com/highcharts - http://api.highcharts.com/highcharts#chart.margin
Here you can find how you can make the padding of your chart smaller, or 0.
Add this your chart script and change the values as you need them to fit in your page
chart: {
marginTop: 10,
marginBottom: 100,
marginLeft: 100,
marginRight: 100
}
UPDATE:
Check this: http://jsfiddle.net/W7bXw/2/
You have to set a width to your div #container and just then set the margins.
Following options work for me
In the chart options, move the chart up by negative top and bottom margin.
chart: {
marginTop: -50,
marginBottom: -50,
marginLeft: 0,
marginRight: 0,
}
Inside the plot options size should be size: '100%'.
plotOptions: {
pie: {
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: 'black',
}
},
size: '100%',
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
I think this is something you expect
series: [{
pointPadding: 0,
groupPadding: 0,
type: 'pie',
size: '100%',
name: 'Browser share',
innerSize: '150%',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
change the innerSize to 150% and try