Chartjs-Using Variable in labels Chart.js of map Array

by

0👍

✅

To Implement custom label there is a chartjs plugin called datalabels which can be imported using cdn

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

or using npm 

npm i chartjs-plugin-datalabels

Refer the below code to which implement custom date as label


 let x = [],
              y = [];
            data.forEach(z => {
              let date = new Date(z.dateT)
              x.push(date.toLocaleDateString());
            });

            var myLineChart = new Chart(ctx, {
              plugins: [ChartDataLabels],  
              type: "bar",
              data: {
                labels: x,
                datasets: [
                  {
                    data: y,
                    backgroundColor: [
                      "rgba(255, 99, 132, 0.2)",
                      "rgba(54, 162, 235, 0.2)",
                      "rgba(255, 206, 86, 0.2)",
                      "rgba(75, 192, 192, 0.2)",
                      "rgba(153, 102, 255, 0.2)",
                      "rgba(255, 159, 64, 0.2)",
                      "rgba(211, 84, 0,0.8)"
                    ]
                  }
                ]
              },
              options: options
            });
          }
        };
    ````

Leave a comment