Chart.js - Bar Chart Code

bar-chart.js

// Grab the bar chart canvas
const barChartContext = document
  .getElementById('js-bar-chart')
  .getContext('2d');

// Chart configuration
const config = {
  type: 'bar',
  data: {
    // Chart data
    labels: ['JAVASCRIPT', 'HTML/CSS', 'SQL', 'PYTHON', 'JAVA'],
    datasets: [
      {
        data: [67.7, 63.1, 54.7, 44.1, 40.2],
        label: 'Programming languages votes',
        backgroundColor: ['yellow', 'blue', 'brown', 'purple', 'indigo'],
        borderWidth: 0.3,
        borderColor: 'black',
      },
    ],
  },
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: {
          callback: function (value) {
            return value + '%';
          },
        },
      },
    },
  },
};

// Creating a new chart instance
const newBarChart = new Chart(barChartContext, config);