CODEWITHSUNDEEP
angularionic-frameworkchart.js
zer09
zer09

Reputation: 1588

Chart js dataset label not showing

I'm trying now chart.js version 3.6 but I got a problem that the dataset label is not showing.

I tried this, but with no avail

    const labels: string[] = [];
    const sold: number[] = [];
    const released: number[] = [];

    for (const d of r.data) {
        labels.push(d.date);
        sold.push(d.sold);
        released.push(d.released);
    }

    const quarterChart = new Chart('quarterGraphCanvas', {
        type: 'line',
        data: {
            labels,
            datasets: [
                {
                    label: 'Sold Amount',
                    data: sold,
                    fill: false,
                    borderColor: 'red',
                },
                {
                    label: 'Released Amount',
                    data: released,
                    fill: false,
                    borderColor: 'blue',
                },
            ],
        },
        options: {
            plugins: {
                tooltip: {
                    mode: 'index',
                    intersect: false,
                },
            },
            scales: {
                y: {
                    beginAtZero: true,
                },
            },
        },
    });

    quarterChart.render();

The label Sold Amount and Released Amount is not showing. What options I missed?

Upvotes: 0

Views: 1265

Answers (1)

zer09
zer09

Reputation: 1588

The problem was the chart.js integration, I only select a few controllers I thought I only needed, and come up with this.

  Chart.register(
    LinearScale,
    CategoryScale,
    LineElement,
    LineController,
    PointElement
  );

And was fixed using

Chart.register(...regiserables);

But I settled with

import Chart from 'chart.js/auto';

And completely remove the Chart.register.

Upvotes: 1

Related Questions