[Chartjs]-Chartjs tick color different at zero

by

3👍

✅

You’re looking for the Grid Line Styling option zeroLineColor, which controls the stroke color of the grid line for the first index (index 0).

more info here: https://www.chartjs.org/docs/2.8.0/axes/styling.html

To achieve the desired result, add the following line after each of your gridline configurations:

"zeroLineColor": "rgba(0,0,0,1)"

See a full working example below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js" integrity="sha512-U3hGSfg6tQWADDQL2TUZwdVSVDxUt2HZ6IMEIskuBizSDzoe65K3ZwEybo0JOcEjZWtWY3OJzouhmlGop+/dBg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
  "responsive": true,
  "maintainAspectRatio": false,
  "title": {
    "display": false,
    "text": "xxxxxxxxxxxxx"
  },
  "layout": {
    "padding": {
      "left": 0,
      "right": 0,
      "top": 0,
      "bottom": 0
    }
  },
  "scales": {
    "yAxes": [
      {
        "id": "y-axis-0",
        "position": "left",
        "borderWidth": 1,
        "ticks": {
          "type": "linear",
          "beginAtZero": true,
          "padding": 10,
          "fontColor": "rgba(0,0,0,1)",       
        },
        "scaleLabel": {
          "display": true,
          "fontSize": 14,
          "labelString": "yyyyyyyyyyy",
          "fontColor": "rgba(0,0,0,1)"
        },
        "gridLines": {
          "display": true,
          "drawOnChartArea": false,
          "drawTicks": true,
          "color": "rgba(0,0,0,1)",
          "zeroLineColor": "rgba(0,0,0,1)"
        },
        "stacked": false
      },
      {
        "id": "y-axis-1",
        "position": "right",
        "fontColor": "rgba(0,0,0,1)",
        "ticks": {
          "type": "linear",
          "beginAtZero": true,
          "padding": 10,
          "fontColor": "rgba(0,0,0,1)",
          "suggestedMax": 118.4
        },
        "scaleLabel": {
          "display": true,
          "fontSize": 14,
          "labelString": "zzzzzzzzzzzzz",
          "fontColor": "rgba(0,0,0,1)"
        },
        "gridLines": {
          "drawTicks": true,
          "display": true,
          "drawOnChartArea": false,
          "offsetGridLines": false,
          "color": "rgba(0,0,0,1)",
          "zeroLineColor": "rgba(0,0,0,1)"
        },
        "display": true
      }
    ],
    "xAxes": [
      {
        "id": "x-axis",
        "position": "bottom",
        "ticks": {
          "padding": 20,
          "autoSkipPadding": 5,
          "fontColor": "rgba(0,0,0,1)"
        },
        "scaleLabel": {
          "display": true,
          "labelString": "Year",
          "fontColor": "rgba(0,0,0,1)",
          "fontSize": 14
        },
        "gridLines": {
          "drawTicks": true,
          "display": true,
          "drawOnChartArea": false,
          "offsetGridLines": false,
          "color": "rgba(0,0,1,1)"
        },
        "stacked": false
      }
    ]
  },
  "legend": {
    "display": false
  }
}
});
</script>

Leave a comment