Create Grouped bar charts with each group different level in chart.js - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Bar Chart

Description

Create Grouped bar charts with each group different level in chart.js

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js - Bar Chart with Different Colored Bars</title> 
   </head> 
   <body translate="no"> 
      <div style="width: 40%"> 
         <canvas id="canvas"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
      var chartColors = {/*from  w  w  w  .  ja  va 2  s.com*/
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(231,233,237)'
};
window.randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100);
};
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Car", "Bike", "Walking"],
    datasets: [{
      label: 'Fuel',
      backgroundColor: [
        chartColors.red,
        chartColors.blue,
        chartColors.yellow],
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
      ]
    }]
  },
  options: {
    title: {
      display: true,
      text: "Chart.js - Different Bar Colors"
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    legend: {
      display: false,
    },
    responsive: true,
  }
});
      </script>  
   </body>
</html>

Related Tutorials