I’m using ApexCharts.js to add pie chart component on my page.
And I need to change the label size, font and position to bottom.
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<body>
<div id="pieChart"></div>
<script>
var options = {
series: [10, 20, 30, 50],
chart: {
height: 480,
type: 'pie',
},
labels: ["series_1", "series_2", "series_3", "series_4"],
colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
chart.render();
</script>
</body>Finally, I want my chart to look like this
Do you have any idea how to modify the code so to get the same result as it is on the picture?
>Solution :
I added your labels to the bottom.
You can edit the spacing by modifying:
itemMargin: {
horizontal: 5,
vertical: 0
},
Docs can be found here: https://apexcharts.com/docs/options/legend/
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<body>
<div id="pieChart"></div>
<script>
var options = {
series: [10, 20, 30, 50],
chart: {
height: 480,
type: 'pie',
},
labels: ["series_1", "series_2", "series_3", "series_4"],
colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
legend: {
show: true,
showForSingleSeries: false,
showForNullSeries: true,
showForZeroSeries: true,
position: 'bottom',
horizontalAlign: 'center',
fontSize: '18px',
fontFamily: 'Helvetica, Arial',
fontWeight: 400,
itemMargin: {
horizontal: 15,
vertical: 0
},
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
}
}]
};
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
chart.render();
</script>
</body>