Chart.js horizontal bar grid line colors - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chart.js horizontal bar grid line colors

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>ChartJS Axis color</title> 
   </head> 
   <body translate="no"> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> 
      <div class="container"> 
         <canvas id="myChart" width="400" height="60"></canvas> 
      </div> 
      <script>
      var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: "horizontalBar",
        data: {// w  w w.  ja va 2 s  . c om
            labels: ["Totals"],
            datasets: [
                { label: "A", data: [1800], backgroundColor: "rgba(165, 97, 125, 1.0)" },
                { label: "B", data: [1800], backgroundColor: "rgba(239, 195, 77, 1.0)" },
                { label: "C", data: [1800], backgroundColor: "rgba(70, 89, 71, 1.0)" },
                { label: "D", data: [900], backgroundColor: "rgba(82, 103, 161, 1.0)" },
                { label: "E", data: [2400], backgroundColor: "rgba(161, 132, 82, 1.0)" },
                { label: "F", data: [1300], backgroundColor: "rgba(82, 160, 161, 1.0)" }
            ]
        },
        options: {
            scales: {
                xAxes: [
                    {
                        barThickness: 13,
                        ticks: {
                            min: 0,
                            max: 11000,
                            stepSize: 3000,
                            display: true,
                            beginAtZero: false,
                            fontSize: 9,
                            color: "rgba(0, 0, 0, 1.0)",
                            callback: function (value, index, values) {
                                var q = value / 100;
                                return q + 'k';
                            }
                        },
                        gridLines: {
                            color: 'rgb(32, 83, 214)', //give the needful color
                            display: true,
                        },
                        stacked: true
                    }
                ],
                yAxes: [{
                    gridLines: {
                        color: 'rgb(32, 83, 214)' //give the needful color
                    },
                    display: true,
                    stacked: true
                }]
            }
        }
    });
      </script>  
   </body>
</html>

Related Tutorials