ApexCharts - Adding a number inside the "Simple Donut Chart"

Question

I have been trying to add a number on the inside of the "Simple donut chart" from ApexCharts. This is the link to it - https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/ .

To use the chart, I ran the command "npm install apexcharts --save" in my project terminal.

This is my HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="./Chart.css">

    <script src="./Chart.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

</head>

<div id="chart"></div>
    <script>
        const chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    </script>

</html>

This is my CSS file:

#chart{
    width:400px;
    height:400px;
    margin-left: auto;
    margin-right: auto;
}

This is what I used in my JavaScript file:

var options = {
    series: [44, 55, 41, 60],
    labels: ["Transport", "Shopping", "Energy use", "Food"],
    chart: {
        type: 'donut',
    },
    responsive: [{
        breakpoint: 480,
        options: {
            chart: {
                width: 200
            },
            legend: {
                position: 'bottom'
            }
        }
    }]
};

This is the result of the code mentioned above:

Current Chart

This is a model to show how I would like the number to be displayed:

Example Chart

I would like to know if its possible to add a number inside the current chart with ApexCharts as the example chart shows.

Answer 1

Yes it's possible.

 let options = { series: [44, 55, 41, 60], labels: ["Transport", "Shopping", "Energy use", "Food"], chart: { type: 'donut', }, plotOptions: { pie: { donut: { labels: { show: true, total: { show: true, label: '', formatter: () => 'Text you want' } } } } } }; const chart = new ApexCharts(document.querySelector("#chart"), options); chart.render();

 <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.18.1/dist/apexcharts.min.js"></script> <div id="chart"></div>

You can show the following information inside a donut:

a value of an individual donut piece (on hover to that piece)
the total of all the donut pieces
custom text

Try to change values of the total object properties to better understanding what I mean. More detailed information is here

ApexCharts - Adding a number inside the "Simple Donut Chart"

Question

1 answers

solution1
2 2020-04-14 09:28:41

ApexCharts - Adding a number inside the "Simple Donut Chart"

Question

1 answers

solution1 2 2020-04-14 09:28:41

solution1
2 2020-04-14 09:28:41