Is it possible to remove the empty space between the bars within a Highcharts polar chart, so that it looks like a pie chart? I just want to fill up the whole 360 degrees of the chart without spaces between the "spikes".
Example: JSFiddle
Are there any options for the plot or series parameter?
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
You just have to add the pointPadding option :
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPadding: 0
}
}
http://jsfiddle.net/7pddwx6a/
Related
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,
},
}
}
I would like to edit or remove the gaps in a Higharts chart like this:
Is there any way to style or configure my chart to achieve this?
This is the Demo:
https://www.highcharts.com/samples/codepen/highcharts/demo/bar-stacked
Thanks
You can control the space between bars using pointPadding, groupPadding and borderWidth properties:
plotOptions: {
series: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
borderWidth: 0
}
}
Demo:
https://jsfiddle.net/BlackLabel/at1r2xLj/1/
API reference:
https://api.highcharts.com/highcharts/series.bar.pointPadding
https://api.highcharts.com/highcharts/series.bar.groupPadding
https://api.highcharts.com/highcharts/series.bar.borderWidth
I want to create chart as per below image. I have also created jsfiddle using highchart in the fiddle.
but, still not able to do what I want. How do I do? Any help would be
appreciated.
http://jsfiddle.net/shahrishabhptechnical/2uxq7raf/
jsfiddle - Highcharts Example
You can use basic yAxis to show ticks with labels, but you will need the right properties and wrap on getMarkPath method:
yAxis: {
lineWidth: 1,
tickPosition: 'inside',
showLastLabel: true,
tickWidth: 1,
tickColor: '#000000',
angle: 90,
tickInterval: 1,
labels: {
y: -10
},
lineColor: '#000000'
}
Live demo: http://jsfiddle.net/BlackLabel/e940tvzx/
API: https://api.highcharts.com/highcharts/yAxis
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I'm trying to plot only markers on the Scatter Chart. The problem is whatever marker size I've specified for series marker is also applied for the legend marker. How to have different marker size for Legend and Series.
Please refer to this fiddle link.
In Fiddle the difference in marker size not clearly visible, so here is the screenshot from the browser.
plotOptions: {
scatter: {
animation: false,
marker: {
radius: 5,
//fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
radius:22,
symbol : 'square',
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
/*tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}*/
}
},
Thank You
Have you tried setting symbolHeight on your legend?
legend: {
enabled:true,
symbolHeight: 10
},
I have some issues with my stacked highcharts graph:
$('#container').highcharts(
chart:
type: 'column'
credits:
enabled: false
title:
text: ''
xAxis:
lineColor: '#afafaf'
lineWidth: 1
tickWidth: 0
labels:
enabled: false
opposite: true
yAxis:
min: 0
max: 4
gridLineWidth: 0
lineWidth: 0
labels:
enabled: false
title:
text: ''
reversed: true
legend:
enabled: false
tooltip:
enabled: false
plotOptions:
column:
borderWidth: 1
borderColor: '#FFFFFF'
pointPadding: 0
groupPadding: 0
animation: false
stacking: 'normal'
dataLabels:
enabled: false
series: [
color: '#FF0000' # red
data: [1,2,3]
,
color: '#0000FF' # blue
data: [0,2,1]
]
)
The graph is fiddled here (I've chosen a small container size to show pixel differences).
blue graph has no upper border (this can be fixed by inserting a third series with all zeroes)
middle column of the blue graph overlaps with the right column, if container width has (3n+1)px (n being any integer)
the red part of the middle column is 1px smaller in height than the blue part, if container height has an even number of pixels
My workarounds are pretty ugly, especially for (2) because the problematic container widths depend of the number of columns, which may vary in my application.
Any ideas? Are these bugs in highcharts.js or have I done something wrong in my highcharts configuration?
The border overlaps with the grid line or axis line, which is intended
This is issue https://github.com/highslide-software/highcharts.com/issues/2694. We'll look into it.
This is a consequence of rounding to the nearest full pixel in order to render sharp graphics.