<div class="container pt-4">

  <section class="row mb-4">

    <div class="col-12">

      <div class="card">

        <div class="card-body">

          <div class="title-box mb-3">

            <h2 class="title">

              Marketing sources

            </h2>

          </div>

          <div class="chartBox my-4" style="height:380px;">

            <canvas id="chart-marketing-sources"></canvas>

          </div>

        </div>

      </div>

    </div>

  </section>

</div>

​

  const chartMarketingSourcesOption = {

  dataLabelsPlugin: true,

  options: {

    maintainAspectRatio: false,

    legend: {

      position: "right",

      labels: {

        boxWidth: 10,

      },

    },

    plugins: {

      datalabels: {

        formatter: (value, ctx) => {

          let sum = 0;

          let dataArr = dataChartMarketingSources.data.datasets[0].data;

          dataArr.map((data) => {

            sum += data;

          });

          let percentage = ((value * 100) / sum).toFixed(2) + "%";

          return percentage;

        },

        color: "white",

        labels: {

          title: {

            font: {

              size: "13",

            },

          },

        },

      },

    },

  },

};

​

// Chart devices 1

const dataChartMarketingSources = {

  type: "doughnut",

  data: {

    labels: ["Organic search", "Direct", "Social"],

    datasets: [

      {

        label: "Traffic",

        data: [8112, 5343, 3545],

        backgroundColor: [

          "rgba(63, 81, 181, 0.5)",

          "rgba(77, 182, 172, 0.5)",

          "rgba(66, 133, 244, 0.5)",

        ],

      },

    ],

  },

};

​

const dataChartMarketingSourcesUpdate = {

  type: "doughnut",

  data: {

    labels: ["Organic search", "Direct", "Social"],

    datasets: [

      {

        label: "Traffic",

        data: [1000, 2000, 3000],

        backgroundColor: [

          "rgba(63, 81, 181, 0.5)",

          "rgba(77, 182, 172, 0.5)",

          "rgba(66, 133, 244, 0.5)",

        ],

      },

    ],

  },

};

​

var myChart;

function initializeChart() {

  myChart = new mdb.Chart(

    document.getElementById("chart-marketing-sources"),

    dataChartMarketingSources,

    chartMarketingSourcesOption

  );

}

​

initializeChart();

setTimeout(() => {  console.log("Waiting"); }, 5000);

updateChart();

​

function updateChart() {

  myChart.update(dataChartMarketingSourcesUpdate);

}