0

I have a bar chart with gridlines displayed to false. Now, I need to set the width and color, only for the axis lines (x and y). I can set these values as:

options:{
  scales: {
    xAxes: [{
      gridLines: {
          color: "rgba(0,0,0,1)",
          lineWidth: 1
      }
    }],
    yAxes: [{
      gridLines: {
          color: "rgba(0,0,0,1)",
          lineWidth: 1
      }
    }],
  }
}

However, when I want to hide the gridlines, I am unable to set the styling (width or color) , only for the axes.

options:{
  scales: {
    xAxes: [{
      gridLines: {
        display:false
      }
    }],
    yAxes: [{
      gridLines: {
        display:false
      }
    }],
  }
}

I have tried scaleLineColor but that too didn't seem to work. Here is my full code:

    var q1 = document.getElementById("q1").getContext('2d');
    var q1Chart = new Chart(q1, {
      type: 'bar',
      data: {
        labels: ["Very Good(9-10)","Good(8-7)","OK(5-6)","Bad (3-4)","Cant be worse (0-2)"],
        datasets: [{
          label: "Our Performance",
          data: [19.56,37.90,1.29,30.36,10.89],
          backgroundColor: ["#d93030","#288fba","#367fa9","#367fa9","#367fa9"],
          datalabels: {
            align: 'top',
            anchor: 'end',
            font: {
              size: 18,
              weight: 900,
            },
            formatter: function(value) {
              var label = value;
              var keys, klen, k;
              return label + '%';
            }
          }
        }]
      },
      scaleLineColor: "rgba(0,0,0,1)",
      options:{
                scales: {
          xAxes: [{
            barThickness : 50,
            ticks: {
              fontColor: "black",
              fontSize: 20,
              autoSkip: false,
            },
            gridLines: {
              display:false
            }
          }],
          yAxes: [{
            ticks: {
              fontColor: "black",
              fontSize: 20,
              beginAtZero: true,
              stepSize: 10
            },
            gridLines: {
              display:false
            }
          }],
        },
        responsive: false,
        maintainAspectRatio: true,
        legend: {
            display: false
         },
         tooltips: {
            enabled: false
         },
         layout: {
          padding: {
              left: 0,
              right: 0,
              top: 30,
              bottom: 0
          }
        }
      },
    });
gentrobot
  • 673
  • 6
  • 25

1 Answers1

1

The only way I know to do this, is to write a plugin to do it

Chart.pluginService.register({
  afterDraw: function (chart, easing) {
    if (chart.config.options && chart.config.options.scales) {
      if (chart.config.options.scales.xAxes)
        chart.config.options.scales.xAxes.forEach(function (xAxisConfig) {
          if (!xAxisConfig.color)
            return;

          var ctx = chart.chart.ctx;
          var chartArea = chart.chartArea;
          var xAxis = chart.scales[xAxisConfig.id];

          // just draw the scale again with different colors
          var color = xAxisConfig.gridLines.color;
          xAxisConfig.gridLines.color = xAxisConfig.color;
          xAxis.draw(chartArea);
          xAxisConfig.gridLines.color = color;
        });

      if (chart.config.options.scales.yAxes)
        chart.config.options.scales.yAxes.forEach(function (yAxisConfig) {
          if (!yAxisConfig.color)
            return;

          var ctx = chart.chart.ctx;
          var chartArea = chart.chartArea;
          var yAxis = chart.scales[yAxisConfig.id];

          var color = yAxisConfig.gridLines.color;
          yAxisConfig.gridLines.color = yAxisConfig.color;
          yAxis.draw(chartArea);
          yAxisConfig.gridLines.color = color;

          ctx.restore();
        });
    }
  }
});


Chart.pluginService.register({
  afterDraw: function (chart, easing) {
    if (chart.config.options && chart.config.options.scales) {
      if (chart.config.options.scales.xAxes)
        chart.config.options.scales.xAxes.forEach(function (xAxisConfig) {
          if (!xAxisConfig.color)
            return;

          var ctx = chart.chart.ctx;
          var chartArea = chart.chartArea;
          var xAxis = chart.scales[xAxisConfig.id];

          // just draw the scale again with different colors
          var color = xAxisConfig.gridLines.color;
          xAxisConfig.gridLines.color = xAxisConfig.color;
          xAxis.draw(chartArea);
          xAxisConfig.gridLines.color = color;
        });

      if (chart.config.options.scales.yAxes)
        chart.config.options.scales.yAxes.forEach(function (yAxisConfig) {
          if (!yAxisConfig.color)
            return;

          var ctx = chart.chart.ctx;
          var chartArea = chart.chartArea;
          var yAxis = chart.scales[yAxisConfig.id];

          var color = yAxisConfig.gridLines.color;
          yAxisConfig.gridLines.color = yAxisConfig.color;
          yAxis.draw(chartArea);
          yAxisConfig.gridLines.color = color;

          ctx.restore();
        });
    }
  }
});


var q1 = document.getElementById("q1").getContext('2d');
var q1Chart = new Chart(q1, {
  type: 'bar',
  data: {
    labels: ["Very Good(9-10)", "Good(8-7)", "OK(5-6)", "Bad (3-4)", "Cant be worse (0-2)"],
    datasets: [{
      label: "Our Performance",
      data: [19.56, 37.90, 1.29, 30.36, 10.89],
      backgroundColor: ["#d93030", "#288fba", "#367fa9", "#367fa9", "#367fa9"],
      datalabels: {
        align: 'top',
        anchor: 'end',
        font: {
          size: 18,
          weight: 900,
        },
        formatter: function (value) {
          var label = value;
          var keys, klen, k;
          return label + '%';
        }
      }
    }]
  },
  scaleLineColor: "rgba(0,0,0,1)",
  options: {
    scales: {
      xAxes: [{
        color: 'yellow',
        barThickness: 100,
        ticks: {
          fontColor: "black",
          fontSize: 20,
          autoSkip: false,
        },
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        color: 'yellow',
        barThickness: 150,
        ticks: {
          fontColor: "black",
          fontSize: 20,
          beginAtZero: true,
          stepSize: 10
        },
        gridLines: {
          display: false
        }
      }],
    },
    responsive: true,
    maintainAspectRatio: true,
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    layout: {
      padding: {
        left: 0,
        right: 0,
        top: 30,
        bottom: 0
      }
    }
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
<canvas id="q1" height=""></canvas>
kemotoe
  • 1,730
  • 13
  • 27