<!doctype html> <html> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.css"rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.css"rel="stylesheet" type="text/css"> <head> <title>Grid Lines Display Settings</title> <script src="assets/js/Chart.min.js"></script> <script src="assets/js/utils.js"></script> <style> canvas{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .chart-container { width: 500px; margin-left: 40px; margin-right: 40px; margin-bottom: 40px; } .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } </style> </head> <body> <div class="container"></div> <script> function createConfig(gridlines, title) { return { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', backgroundColor: window.chartColors.red, borderColor: window.chartColors.red, data: [10, 30, 39, 20, 25, 34, 0], fill: false, }, { label: 'My Second dataset', fill: false, backgroundColor: window.chartColors.blue, borderColor: window.chartColors.blue, data: [18, 33, 22, 19, 11, 39, 30], }, { label: 'My Third dataset', fill: false, backgroundColor: window.chartColors.blue, borderColor: window.chartColors.blue, data: [20, 33, 52, 19, 43, 39, 12], }] }, options: { responsive: true, title: { display: true, text: title }, scales: { xAxes: [{ gridLines: gridlines }], yAxes: [{ gridLines: gridlines, ticks: { min: 0, max: 100, stepSize: 10 } }] } } }; } window.onload = function() { var container = document.querySelector('.container'); [{ title: 'Display: true', gridLines: { display: true } }, { title: 'Display: true', gridLines: { display: true } }, { title: 'Display: true, no border', gridLines: { display: true, drawBorder: true } }, { title: 'DrawOnChartArea: true', gridLines: { display: true, drawBorder: true, drawOnChartArea: true, } }, { title: 'DrawTicks: false', gridLines: { display: true, drawBorder: true, drawOnChartArea: true, drawTicks: true, } }].forEach(function(details) { var div = document.createElement('div'); div.classList.add('chart-container'); var canvas = document.createElement('canvas'); div.appendChild(canvas); container.appendChild(div); var ctx = canvas.getContext('2d'); var config = createConfig(details.gridLines, details.title); new Chart(ctx, config); }); }; </script> </body> </html>