You can change the label size, font, and position in an ApexCharts pie chart by modifying the chart options. Here's an example in JavaScript:
css
Copy code
var options = {
series: [44, 55, 13, 43, 22],
chart: {
type: "pie",
height: 320
},
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
plotOptions: {
pie: {
donut: {
labels: {
show: true,
size: '20px',
fontFamily: 'Arial',
fontWeight: 'bold',
formatter: function(val) {
return val + "%";
},
offsetX: -5,
offsetY: 5
}
}
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
}
var chart = new ApexCharts(document.querySelector("#pie-chart"), options);
chart.render();
In this example, the plotOptions.pie.donut.labels property is used to configure the labels for the pie chart. The size, fontFamily, and fontWeight properties are used to change the size, font, and font weight of the labels, while the offsetX and offsetY properties are used to position the labels relative to the pie chart. The formatter property is used to format the label text by adding the "%" symbol after the value.
Note that these options may vary depending on the version of ApexCharts you are using. For more information, refer to the ApexCharts documentation.
In addition to the properties mentioned above, there are other properties available to further customize the appearance of the labels in an ApexCharts pie chart. Here are some of the other properties that can be used:
background: This property can be used to specify the background color of the label.
style: This property can be used to set the CSS style for the label, such as color, padding, and border.
dropShadow: This property can be used to add a drop shadow to the label.
textAnchor: This property can be used to specify the anchor point of the label, which determines where the label is positioned relative to the data point.
Here's an example that demonstrates how to use some of these properties:
yaml
Copy code
var options = {
series: [44, 55, 13, 43, 22],
chart: {
type: "pie",
height: 320
},
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
plotOptions: {
pie: {
donut: {
labels: {
show: true,
size: '20px',
fontFamily: 'Arial',
fontWeight: 'bold',
formatter: function(val) {
return val + "%";
},
offsetX: -5,
offsetY: 5,
background: {
enabled: true,
color: '#fff',
opacity: 0.9
},
style: {
color: '#333',
padding: {
left: 10,
right: 10,
top: 5,
bottom: 5
},
border: {
width: 1,
color: '#333'
}
},
dropShadow: {
enabled: true,
top: 1,
left: 1,
blur: 1,
opacity: 0.5
},
textAnchor: 'middle'
}
}
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
}
var chart = new ApexCharts(document.querySelector("#pie-chart"), options);
chart.render();
In this example, the background, style, dropShadow, and textAnchor properties are used to further customize the appearance of the labels in the pie chart. These properties can be used together or separately, depending on your specific requirements.