Menu
First I don't know what's it called. But how do you change its color from gray to white? Or is it even possibe?
953
Select the worksheets for which you want to change the gridline color. Click File > Excel > Options. In the Advanced category, under Display options for this worksheet, make sure that the Show gridlines check box is selected. In the Gridline color box, click the color you want.
However, as your data visualization and customization needs grow — the more you'll benefit from getting under the hood of ChartJS. We can refer directly to the ChartJS documentation and customize as much as we need.
It is possible to either remove the grid lines or have them display in a different color.
In both options.scales.xAxes and options.scales.yAxes you can add
gridLines: { display: false , color: "#FFFFFF" }, (obviously you do not need to assign a colour if you are not disaplying them)
var chartColors = { 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)' }; var randomScalingFactor = function() { return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100); } var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var config = { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", backgroundColor: chartColors.red, borderColor: chartColors.red, data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ], fill: false, }, { label: "My Second dataset", fill: false, backgroundColor: chartColors.blue, borderColor: chartColors.blue, data: [ randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor() ], }] }, options: { responsive: true, title: { display: true, text: 'Chart.js Line Chart' }, tooltips: { mode: 'label', }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [{ display: true, gridLines: { display: false }, scaleLabel: { display: true, labelString: 'Month' } }], yAxes: [{ display: true, gridLines: { display: false }, scaleLabel: { display: true, labelString: 'Value' } }] } } }; var ctx = document.getElementById("canvas").getContext("2d"); window.myLine = new Chart(ctx, config);<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.js"></script> <div style="width:100%;"> <canvas id="canvas"></canvas> </div>Since v3 the scales have been changed so if you want your gridlines to have a different color you will need to configure it in options.scales[scaleID].grid.color:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: { scales: { y: { grid: { color: 'white' } }, x: { grid: { color: 'red' } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> </body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
