Chartjs-Donut chart not rendering with csv data chart.js

by

1👍

✅

Since your CSV data has no header, you should use d3.text to load the data, followed by d3.csvParseRows to parse it to a JSON array (see https://stackoverflow.com/a/13870360/2358409). To extract the data values from the JSON array, you can use Array.map.

data: d3.csvParseRows(types).map(v => v[1])

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

d3.text("https://raw.githubusercontent.com/uminder/testdata/main/so/csv/donut.csv").then(makeChart);
function makeChart(types) {
  new Chart('doughnut-chart', {
    type: 'doughnut',
    data: {
      labels: ['Cancelled', 'Success', 'Failed'],
      datasets: [{
        label: 'Population (millions)',
        backgroundColor: ['#3e95cd', '#3cba9f', '#8e5ea2'],
        data: d3.csvParseRows(types).map(v => v[1])
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Weekly  Status'
      }
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="doughnut-chart" height="90"></canvas>

Leave a comment