[Chartjs]-Chart JS – Grid colors and gradient fill not showing

by

3👍

✅

To show gridlines as expected, define a positive z-index of gridline layer as follows (see Grid Line Configuration).

gridLines: {
    color: 'rgb(255, 255, 255)',
    z: 2
},

To show gradient fill, use the previously defined options object (renamed from option) when you create the chart.

var myLineChart = Chart.Line(document.getElementById('chart'), {
  data: data,
  options: options
});

var data = {
  labels: ["Q1", "Q2", "Q3", "Q4", "Q5"],
  datasets: [{
      label: "Your answers",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "rgba(75,192,192,1)",
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "rgba(75,192,192,1)",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(75,192,192,1)",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      decimals: false,
      pointHitRadius: 10,
      data: [3, 5, 6, 3, 7],
      stack: 4
    },
    {
      label: "Average answers",
      fill: false,
      lineTension: 0.1,
      borderColor: "rgba(79,104,241,1)",
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "rgba(75,192,192,1)",
      pointBackgroundColor: "rgba(79,104,241,1)",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "rgba(79,104,241,1)",
      pointHoverBorderColor: "rgba(220,220,220,1)",
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      decimals: false,
      pointHitRadius: 10,
      data: [2, 7, 5, 10, 3],
      stack: 5
    },
    {
      label: "Your average",
      pointStyle: 'line',
      fill: false,
      borderColor: "#ffffff",
      borderCapStyle: 'round',
      borderDash: [0.5, 5],
      borderDashOffset: 1,
      lineTension: 0.1,
      data: [5, 5, 5, 5, 5],

    },
    {
      label: "Audit average",
      pointStyle: 'line',
      fill: false,
      borderColor: "#ffffff",
      borderCapStyle: 'round',
      borderDash: [5, 8],
      borderDashOffset: 0.6,
      lineTension: 0.1,
      data: [7, 7, 7, 7, 7],
    },
  ]
};

var options = {
  plugins: {
    filler: {
      propagate: true
    }
  },
  responsive: true,
  maintainAspectRatio: false,
  tooltips: {
    mode: 'index'
  },
  showLines: true,
  scales: {
    yAxes: [{
      gridLines: {
        color: 'rgb(255, 255, 255)',
        z: 2
      },
      scaleLabel: {
        display: true,
        labelString: 'Scores'
      },
      stacked: false,
      ticks: {
        beginAtZero: 0,
        suggestedMin: 1,
        suggestedMax: 10,
        stepSize: 2,
        userCallback: function(label, index, labels) {
          // when the floored value is the same as the value we have a whole number
          if (Math.floor(label) === label) {
            return label;
          }
        },
      }
    }],
    xAxes: [{
      gridLines: {
        color: 'rgb(255, 255, 255)',
        z: 2
      },
      scaleLabel: {
        display: true,
        labelString: 'Questions'
      },
    }]
  },
  annotation: {
    annotations: [
      {
        drawTime: "beforeDatasetsDraw",
        type: "box",
        id: "n",
        xScaleID: "x-axis-0",
        yScaleID: "y-axis-0",
        xMin: "Q1",
        xMax: "Q5",
        yMin: 0,
        yMax: 3.7,
        backgroundColor: "rgba(26,26,26,0.6)",
        borderColor: "rgba(26,26,26,0.6)",
        borderWidth: 1,

      },
      {
        drawTime: "beforeDatasetsDraw",
        type: "box",
        xScaleID: "x-axis-0",
        yScaleID: "y-axis-0",
        xMin: "Q1",
        xMax: "Q5",
        yMin: 3.7,
        yMax: 7,
        backgroundColor: 'rgba(88,88,88,0.6)',
        borderColor: 'rgba(88,88,88,0.6)',
        borderWidth: 1,

      },
      {
        drawTime: "beforeDatasetsDraw",
        type: "box",
        xScaleID: "x-axis-0",
        yScaleID: "y-axis-0",
        xMin: "Q1",
        xMax: "Q5",
        yMin: 7,
        yMax: 10,
        backgroundColor: 'rgba(31,42,97,0.6)',
        borderColor: 'rgba(88,88,88,0.6)',
        borderWidth: 0
      }
    ]
  }
};

var myLineChart = Chart.Line(document.getElementById('chart'), {
  data: data,
  options: options
});
canvas { background-color:#000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>

<canvas id="chart" width="400" height="250"></canvas>

0👍

Why don’t you use var option variable in the declarations? for example:

var myLineChart = Chart.Line(canvas,{
    data:data,
    options: option 
});

Leave a comment