I'm using ApexCharts.js to add pie chart ponent on my page. And I need to change the label size, font and position to bottom.
<script src="@8/dist/polyfill.min.js"></script>
<script src="/[email protected]/classList.min.js"></script>
<script src=""></script>
<script src=""></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>I'm using ApexCharts.js to add pie chart ponent on my page. And I need to change the label size, font and position to bottom.
<script src="https://cdn.jsdelivr/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/classList.min.js"></script>
<script src="https://cdn.jsdelivr/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr/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?
Share Improve this question edited Feb 1, 2023 at 9:23 Webdeveloper_Jelle 2,8565 gold badges36 silver badges59 bronze badges asked Feb 1, 2023 at 9:15 JiboOneJiboOne 1,5484 gold badges25 silver badges62 bronze badges2 Answers
Reset to default 3The display of the labels are actually called "legend" and all possible options are documented on this page.
In your case, "legend" was nested too deep, it needs to be on the first level. To change the font size and font weight, you need to add the corresponding options "fontSize" and "fontWeight".
Here is a working example:
<script src="https://cdn.jsdelivr/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/classList.min.js"></script>
<script src="https://cdn.jsdelivr/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr/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"],
legend: {
position: 'bottom',
fontSize: '24px',
fontWeight: 600,
},
colors: ["#ff0000", "#c758d0", "#d6d6d6", "#007ed6"],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
}
}]
};
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
chart.render();
</script>
</body>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./docs/options/legend/
<script src="https://cdn.jsdelivr/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/classList.min.js"></script>
<script src="https://cdn.jsdelivr/npm/findindex_polyfill_mdn"></script>
<script src="https://cdn.jsdelivr/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>