Chartjs-Dynamic js chart display problems

by

0👍

✅

Give this a shot:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <title>Title</title>
  </head>
  <body>
    <h2>text</h2>
    <canvas id="bar-chart-horizontal" width="1100" height="400"></canvas>
  </body>

  <script>
    const labels = [
      "Australia",
      "China",
      "USA",
      "New Zealand",
      "Sweden",
      "Norway",
      "Finland",
      "Netherlands",
    ];

    const backgroundColor = [
      "#c45850",
      "#3cba9f",
      "#8e5ea2",
      "#e8c3b9",
      "#e8c3b9",
      "#e8c3b9",
      "#e8c3b9",
      "#e8c3b9",
    ];

    const chartPlots = [
      [0, 0, 36, 0, 0, 0, 0, 0],
      [20, 60, 15, 9, 2, 3, 39, 364],
    ];

    const datasets = chartPlots.map((data, index) => ({
      data,
      backgroundColor,
    }));

    const data = {
      labels,
      datasets,
    };

    const options = {
      legend: { display: false },
      title: {
        display: true,
        text: "Chart Title",
      },
      scales: {
        xAxes: [
          {
            stacked: true,
          },
        ],
        yAxes: [
          {
            stacked: true,
          },
        ],
      },
    };

    const chartConfig = {
      type: "horizontalBar",
      data: data,
      options,
    };

    new Chart(document.getElementById("bar-chart-horizontal"), chartConfig);
  </script>
</html>

Leave a comment