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
Related
I'm trying to pin a pie chart to the left.
A negative marginLeft and center: ['20%', '50%'] don't give me what i need
since when changing the screen width the position of the chart also changes.
I am using Vue 3 composition api
series: [{
center: ['20%', '90%'],
size: '150%',
innerSize: '65%',
data: [
{
name: 'Valid',
y: 10,
color: '#13CE66'
},
{
name: 'Failed Verification',
y: 5,
color: '#FF4949'
}
],
showInLegend: true
}]
It should be like this:
Use the chart.marginLeft property
Example config:
chart: {
type: 'pie',
width: 400,
height: 200,
marginLeft: -230
},
Example demo:
https://jsfiddle.net/BlackLabel/k52j7m9x/
API Reference:
https://api.highcharts.com/highcharts/chart.marginLeft
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: ''
}
}
]
}
This is the JSFiddle for demonstration.
In the two bars shown in the above JSFiddle, the respective top and the bottom side of the two bars are not black, but grey, since that is the color of the chart border/border of plot area. Would it be possible to make the two bars to be "on top" of the chart border (so that all their sides are black)? I have tried with zIndex in "series". But that does not work.
These are the most relevant javascript code:
Highcharts.chart('container', {
chart: {
type: 'column',
borderWidth: 1,
plotBorderWidth: 1,
marginBottom: 100
},
plotOptions: {
series: {
borderColor: 'black',
animation: false
},
},
xAxis: {
categories: ['1', '2']
},
yAxis: {
tickInterval: 10,
min: -50,
max: 50
},
series: [{
data: [50, -50],
zIndex: 300
}]
});
To achieve this effect, you can set series.column.clip: false.
Disabling this option allows series rendering over plotArea borders.
series: [{
clip: false,
data: [50, -50]
}]
Live demo:
https://jsfiddle.net/BlackLabel/2kyc4dbu/
API reference:
https://api.highcharts.com/highcharts/series.column.clip
I'm trying to use highcharts with angular using the highcharts-ng wrapper. The problem is that with the gauge type i can't get the value to fit in my container.
I did a fiddle to make it more clear : http://jsfiddle.net/x1zhmgg5/
What i want to achieve is to get my color bar to fit in the grey one, not the other way around (which would just mean getting a wider outerRadius on the pane.background) :
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
I've been going through the highchart documentation but I couldn't find anything on the yAxis to fix it.
Alter the plotOptions to this:
plotOptions: {
solidgauge: {
dataLabels: {
y: 1,
borderWidth: 5,
useHTML: true
},
innerRadius: '60%', // <--
radius: '70%', // <-- I don't know why it isn't outerRadius too...
}
}