Develop Reference

Apex Charts donut chart - padding between series items in plot

I am attempting to create a donut chart in apex charts similar to the one shown below (right), I have gotten pretty close, however I need to have some stroke or padding around the series items along the plot of the donut chart as shown.
current configuration
const options = {
chart: {
type: 'donut',
height: 150,
width: '100%',
offsetX: 50
},
plotOptions: {
pie: {
startAngle: 10,
donut: {
size: '90%',
dataLabels: {
enabled: false
},
labels: {
show: true,
name: {
show: true,
offsetY: 38,
formatter: () => 'Completed'
},
value: {
show: true,
fontSize: '48px',
fontFamily: 'Open Sans',
fontWeight: 500,
color: '#ffffff',
offsetY: -10
},
total: {
show: true,
showAlways: true,
color: '#BCC1C8',
fontFamily: 'Open Sans',
fontWeight: 600,
formatter: (w) => {
const total = w.globals.seriesTotals.reduce(
(a, b) => a + b,
0
);
return `${total}%`;
}
}
}
}
},
},
dataLabels: {
enabled: false
},
labels: ['Completed', 'Cancelled', 'Pending', 'Failed'],
legend: {
show: false,
position: 'right',
offsetX: -30,
offsetY: 70,
formatter: (value, opts) => {
return value + ' - ' + opts.w.globals.series[opts.seriesIndex];
},
markers: {
onClick: undefined,
offsetX: 0,
offsetY: 25
}
},
fill: {
type: 'solid',
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
},
stroke: {
width: 0
},
colors: ['#8BD742', '#BCC1C8', '#78AEFF', '#F74D52']
};

Try setting the stroke width to greater than 0 and give the stroke same color as the background.
stroke: {
width: 4,
colors: ['#1E252A']
}

How to change fontSize for dataLabels?

I do not see in docs any mention how to adjust fontSize of dataLabels.
dataLabels do not have any mention about font size:
dataLabels: {
offset: 0,
minAngleToShowLabel: 10
},
It's not possible?
new Vue({
el: "#app",
data() {
return {
series: [4, 7, 3, 45, 32, 53],
options: {
expandOnClick: true,
dataLabels: {
minAngleToShowLabel: 50,
// offsetY: 1200,
style: { fontSize: '18px' } // this do not work!
},
chart: {
width: 480,
type: 'pie',
},
legend: {
// offsetX: 510,
fontSize: '16px',
height: 500,
width: 400,
horizontalAlign: 'right',
},
title: {
text: 'Some name',
style: {
fontSize: '20px',
},
},
labels: ["aa", "bb", "cc", "dd", "ee", "ff"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 480
},
legend: {
position: 'right',
offsetY: 40,
fontSize: '16px',
},
}
}]
},
}
},
methods: {
},
components: {
VueApexCharts
}
})
https://jsfiddle.net/ayx8ez9k/

You can find a pretty good summary of your options here on this page: https://apexcharts.com/docs/options/datalabels/
style: {
fontSize: '14px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 'bold',
colors: undefined
},

You can simply provide styling in CSS class.
.apexcharts-pie-label{
font-size:25px;
}

How to add scroll on highcharts multiple drilldown

Im using highcharts that now we have so much item, i need something to make it readable and scrollable, i have added zoom property but it doesnt meet requiriments, any idea?
this is my code :
Highcharts.theme = {
colors: ["#7cb5ec", "#f7a35c", "#90ee7e", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
zoomType: 'x',
backgroundColor: null,
style: {
fontFamily: "Dosis, sans-serif"
}
},
title: {
style: {
fontSize: '16px',
fontWeight: 'bold',
textTransform: 'uppercase'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'rgba(219,219,216,0.8)',
shadow: false
},
legend: {
itemStyle: {
fontWeight: 'bold',
fontSize: '13px'
}
},
xAxis: {
gridLineWidth: 1,
labels: {
style: {
fontSize: '12px'
}
}
},
yAxis: {
minorTickInterval: 'auto',
title: {
style: {
textTransform: 'uppercase'
}
},
labels: {
style: {
fontSize: '12px'
}
}
},
plotOptions: {
candlestick: {
lineColor: '#404048'
}
},
scrollbar: {
enabled: true
},
// General
background2: '#F0F0EA'
};
i have been added zoomType: 'x' for now, but i need to work with scrollable too. what property i should use? i already try highstock but it doesnt work with drilldown charts.

Use can use scrollablePlotArea property. Also, drilldown works with Highstock: http://jsfiddle.net/BlackLabel/9ap2sj7k/
chart: {
scrollablePlotArea: {
minWidth: 1200
}
}
Live demo: http://jsfiddle.net/BlackLabel/b0f2dq3g/
API: https://api.highcharts.com/highcharts/chart.scrollablePlotArea

Highcharts treemap with colouraxis updating styles

I've tried various ways of updating treemap color axis legend font size and font family
var options = {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0],
labels: {
style: {
fontSize: '10px',
fontFamily: 'Arial'
}
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: [{
name: 'A', value: 6,colorValue: 1 }, { name: 'B',value: 6,colorValue: 2 }, {
name: 'C',value: 4,colorValue: 3}, {name: 'D',value: 3,colorValue: 4 }, {
name: 'E',value: 2,colorValue: 5 }, {name: 'F',value: 2, colorValue: 6}, {
name: 'G',value: 1,colorValue: 7}] }],
title: {
text: 'Highcharts Treemap'
}
};
var chart = Highcharts.chart('container', options);
$('#update').click(function () {
chart.update({
chart:{
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
legend: {
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
},
colorAxis: {
labels: {
style: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
}}
});
chart.legend.update({
itemStyle: {
fontSize: '20px',
fontFamily: 'HelveticaNeue'
}
})
});
Please see here - http://jsfiddle.net/hsuh/t04qe2xx/8/
Style doesn't seem to be updated. Please help. Thanks

Your click event is not fired because of the difference in id.
Remove hash from button's id: <button id='update'> Update </button>
Then you can update axis via axis.update()
$('#update').click(function() {
chart.colorAxis[0].update({
labels: {
style: {
fontSize: '20px'
}
}
})
});
example: http://jsfiddle.net/t04qe2xx/9/

Highcharts - center placement of columns

I have a Highcharts column chart and I am trying to reduce the distance between each column on the X axis whilst pulling them towards the center so that the columns appear more grouped.
So for example in my example above, the red and the blue column would be much closer together and positioned towards the center.
Below is my chart configuration. The seriesData parameter is just a custom object I pass in at render.
chartConfig.js
function chartConfig(seriesData) {
return {
barColor: seriesData.color,
data: seriesData,
credits: { enabled: false },
chart: {
width: seriesData.width,
defaultSeriesType: 'column',
backgroundColor: '#EAEFF6'
},
tooltip: { enabled: false },
colorAxis: {
dataClassColor: 'category'
},
colors: [],
legend: {},
title: {
useHTML: true,
text: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '_' : seriesData.name,
style: {
color: (seriesData.name === 'n/a' || seriesData.name === 'N/A') ? '#E9EFF4' : '#666666',
fontSize: '14px',
fontFamily: 'Roboto',
fontWeight: 'bold',
paddingTop: '10px',
lineHeight: '1em'
},
align: 'center',
x: 0,
y: 2
},
plotOptions: {
column: {
stacking: 'normal',
animation: true,
borderColor: 'grey',
borderWidth: 0
},
series: {
borderRadius: 15,
dataLabels: {
enabled: false
},
states: {
hover: {
enabled: false
}
}
}
},
yAxis: [{
max: Math.max.apply(null, seriesData.scaleValues),
min: Math.min.apply(null, seriesData.scaleValues),
title: false,
minorGridLineColor: '#FFF',
gridLineColor: '#8E8E8E',
minPadding: 0,
tickPositions: (seriesData.scalePercentageValues || null),
labels: {
formatter: function () {
if (seriesData.usePercentage) {
return `${this.value} %`;
}
return this.value;
}
}
}],
xAxis: {
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
categories: seriesData.elements.map((x) => { return x.name; }),
labels: {
style: {
color: '#666666',
fontSize: '12px',
fontFamily: 'Roboto'
}
}
},
series: [{
dataLabels: {
style: {
fontSize: '12px',
fontWeight: 'normal',
textShadow: 'none',
color: 'black',
fontFamily: 'Roboto',
backgroundColor: 'blue'
},
enabled: true,
formatter: function () {
if (seriesData.usePercentage) {
return `${this.y}%`;
}
return this.y;
}
},
showInLegend: false,
name: 'Fill Series',
color: '#F2F6F9',
pointWidth: 28,
animation: true,
data: seriesData.elements.map((x) => {
return { name: x.name, y: x.value, color: x.color };
}),
borderRadiusTopLeft: 10,
borderRadiusTopRight: 10,
borderColor: '#C0C0C0',
borderWidth: '1'
}]
};
}
module.exports = chartConfig;
The only solution I have tried so far is to use pointPadding and groupPadding. However this does not seem to have the desired effect.