[Chartjs]-How to make bars different colours in Chart.js with csv data?

by

2👍

✅

The data that in dataset needs to be array of objects each having properties, consider the following:

var ctx1 = document.getElementById('chart1').getContext('2d');
var chart1 = new Chart(ctx1, {
  type: 'bar',
  plugins: [ChartDataSource],
  options: {
    plugins: {
      datasource: {
        url: 'https://nagix.github.io/chartjs-plugin-datasource/samples/sample-dataset.xlsx'
      }
    }
  },
  data: {
    datasets: [{
        backgroundColor: 'rgb(19, 82, 150)',
        borderColor: 'transparent'
      },
      {
        backgroundColor: 'rgb(196, 230, 255)',
        borderColor: 'transparent'
      }
    ]
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.14.3/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
<canvas id="chart1" style="display: block; width: 580px; height: 290px;" width="580" height="290"></canvas>

Leave a comment