CODEWITHSUNDEEP
javascriptchart.js
Jricho Luck
Jricho Luck

Reputation: 11

how labels in chartjs can make data invisible

my code is like this

const data = {
  days: [
    0, 0, 0, 0, 123, 0, 0, 45, 0, 0, 0, 43, 0, 123, 0, 0, 43, 0, 0, 0, 0, 43, 0,
    0, 0, 43, 0, 0, 0, 0, 32, 0, 0, 0, 54, 0, 0, 0, 232, 32, 0, 212, 0, 0, 43,
    0, 23, 0, 0, 0, 12, 0,
  ],
  seconds: [
    52.2909, 26.4449, 16.7054, 8.7704, 3.5397, 2.7876, 6.7211, 2.8077, 0.7437,
    1.0504, 1.6137, 0.6969, 0.5165, 0.4017, 0.239, 0.2001, 0.1516, 0.0348,
    0.0443, 0.0286, 0.0217, 0.0181, 0.0122, 0.0131, 0.0031, 0.0065, 16686.9304,
    12610.8165, 49872.3664, 21321.155, 33705.2063, 54887.3542, 32077.976,
    17994.7266, 15847.4785, 24065.34, 7971.773, 3930.3123, 3294.6206, 1925.8107,
    2113.6292, 2353.2807, 448.5209, 1307.2341, 343.6484, 567.8189, 405.3052,
    79.4946, 212.0314, 81.9343, 100.1345, 61.209,
  ],
  weeks: [
    0, 0, 0, 0, 0, 213, 0, 43, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 0, 60, 0,
    0, 0, 0, 100, 0, 0, 0, 0, 0, 0, 65, 0, 0, 78, 0, 0, 90, 0, 0, 0, 12, 0, 0,
    43, 0, 0, 0, 0,
  ],
  minutes: [
    5613.5638, 4018.1524, 2782.8912, 2223.0685, 859.3159, 1092.8524, 6106.947,
    2236.1713, 811.9827, 1642.5207, 5930.5772, 2876.2958, 3231.4032, 3190.6772,
    2563.7517, 4262.5525, 4031.1007, 682.8778, 2327.1964, 2100.0363, 2425.7081,
    2369.4146, 3155.9515, 2829.6594, 918.8314, 3467.2555, 3559.1161, 1466.975,
    4802.0379, 1910.0191, 2593.348, 4772.5789, 2503.5062, 1633.5984, 1994.0311,
    5839.1324, 2152.2181, 902.1712, 1233.78, 1399.3437, 2307.5043, 3974.9305,
    942.2388, 4584.5575, 1802.5456, 4606.8556, 5108.2835, 1111.4571, 5088.5189,
    2394.1285, 4773.9491, 3483.375,
  ],
};

const ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
  type: "doughnut",
  data: {
    labels: Object.keys(data),
    datasets: [
      {
        label: "days",
        data: data.days,
        backgroundColor: "rgba(255, 99, 132)",
        hoverOffset: 4,
      },
      {
        label: "seconds",
        data: data.seconds,
        backgroundColor: ["rgba(255, 206, 86)"],
        hoverOffset: 4,
      },
      {
        label: "weeks",
        data: data.weeks,
        backgroundColor: ["rgba(54, 162, 235)"],
        hoverOffset: 4,
      },
      {
        label: "minutes",
        data: data.minutes,
        backgroundColor: ["rgba(75, 192, 192)"],
        hoverOffset: 4,
      },
    ],
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      y: {
        display: false,
      },
    },
  },
});
*,
*::after,
*::before {
  box-sizing: border-box;
}

.chart {
  width: 400px;
  height: 400px;
  margin: auto;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Task 1</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/task1/css/normalize.css" />
    <link rel="stylesheet" href="/task1/css/style.css" />
  </head>

  <body>
    <div class="chart">
      <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <script src="./chart.js"></script>
  </body>
</html>

if you run the snippet you will see that all labels got the same color which is weird and also if you tick say the week category, it doesn't get removed.

I am trying to understand how chart.js works but I seem to fail.

I want to achieve two things.

1- Assign each label to a different color.

2- whenever I click on a label all the related data should be removed.

any help?

Upvotes: 1

Views: 71

Answers (1)

uminder
uminder

Reputation: 26150

The expected behavior can be obtained by defining the following options:

Please take a look at your amended code and see how it works.

const data = {
  days: [
    0, 0, 0, 0, 123, 0, 0, 45, 0, 0, 0, 43, 0, 123, 0, 0, 43, 0, 0, 0, 0, 43, 0,
    0, 0, 43, 0, 0, 0, 0, 32, 0, 0, 0, 54, 0, 0, 0, 232, 32, 0, 212, 0, 0, 43,
    0, 23, 0, 0, 0, 12, 0,
  ],
  seconds: [
    52.2909, 26.4449, 16.7054, 8.7704, 3.5397, 2.7876, 6.7211, 2.8077, 0.7437,
    1.0504, 1.6137, 0.6969, 0.5165, 0.4017, 0.239, 0.2001, 0.1516, 0.0348,
    0.0443, 0.0286, 0.0217, 0.0181, 0.0122, 0.0131, 0.0031, 0.0065, 16686.9304,
    12610.8165, 49872.3664, 21321.155, 33705.2063, 54887.3542, 32077.976,
    17994.7266, 15847.4785, 24065.34, 7971.773, 3930.3123, 3294.6206, 1925.8107,
    2113.6292, 2353.2807, 448.5209, 1307.2341, 343.6484, 567.8189, 405.3052,
    79.4946, 212.0314, 81.9343, 100.1345, 61.209,
  ],
  weeks: [
    0, 0, 0, 0, 0, 213, 0, 43, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 0, 60, 0,
    0, 0, 0, 100, 0, 0, 0, 0, 0, 0, 65, 0, 0, 78, 0, 0, 90, 0, 0, 0, 12, 0, 0,
    43, 0, 0, 0, 0,
  ],
  minutes: [
    5613.5638, 4018.1524, 2782.8912, 2223.0685, 859.3159, 1092.8524, 6106.947,
    2236.1713, 811.9827, 1642.5207, 5930.5772, 2876.2958, 3231.4032, 3190.6772,
    2563.7517, 4262.5525, 4031.1007, 682.8778, 2327.1964, 2100.0363, 2425.7081,
    2369.4146, 3155.9515, 2829.6594, 918.8314, 3467.2555, 3559.1161, 1466.975,
    4802.0379, 1910.0191, 2593.348, 4772.5789, 2503.5062, 1633.5984, 1994.0311,
    5839.1324, 2152.2181, 902.1712, 1233.78, 1399.3437, 2307.5043, 3974.9305,
    942.2388, 4584.5575, 1802.5456, 4606.8556, 5108.2835, 1111.4571, 5088.5189,
    2394.1285, 4773.9491, 3483.375,
  ],
};

let myChart = new Chart('myChart', {
  type: "doughnut",
  data: {
    labels: Object.keys(data),
    datasets: [{
        label: "days",
        data: data.days,
        backgroundColor: "rgb(255, 99, 132)",
        hoverOffset: 4,
      },
      {
        label: "seconds",
        data: data.seconds,
        backgroundColor: "rgb(255, 206, 86)",
        hoverOffset: 4,
      },
      {
        label: "weeks",
        data: data.weeks,
        backgroundColor: "rgb(54, 162, 235)",
        hoverOffset: 4,
      },
      {
        label: "minutes",
        data: data.minutes,
        backgroundColor: "rgb(75, 192, 192)",
        hoverOffset: 4,
      },
    ],
  },
  options: {
    plugins: {
      legend: {
        labels: {
          generateLabels: chart => chart.data.labels.map((l, i) => ({
            datasetIndex: i,
            text: l,
            fillStyle: chart.data.datasets[i].backgroundColor,
            strokeStyle: chart.data.datasets[i].backgroundColor,
            hidden: chart.getDatasetMeta(i).hidden
          }))
        },
        onClick: (event, legendItem, legend) => {  myChart.getDatasetMeta(legendItem.datasetIndex).hidden = !legendItem.hidden;
          myChart.update();
        }
      },
      tooltip: {
        callbacks: {
          label: context => myChart.data.labels[context.datasetIndex] + ': ' + myChart.data.datasets[context.datasetIndex].data[context.dataIndex]
        }
      }
    }
  }
});
canvas {
  max-height: 300px;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<canvas id="myChart"></canvas>

Upvotes: 1

Related Questions