[Chartjs]-How can I keep the vertical lines under the horizontal ruler line is chartjs?

by

1👍

✅

You can hide the xAxes gridlines. See the documentation here. Example:

var myChart = new Chart(document.getElementById("myChart"), {
  type: "line",
  data: {
    labels: [1500, 1550, 1600, 1650, 1700, 1750, 1800, 1850, 1900],
    datasets: [{
      data: [86, 114, 106, 86, 114, 106, 86, 114, 106, 86, 114, 106],
      label: "Africa",
      borderColor: "#3e95cd",
      fill: false
    }, {
      data: [282, 350, 411, 282, 350, 411, 282, 350, 411, 282, 350, 411],
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }, {
      data: [168, 170, 178, 168, 170, 178, 168, 170, 178, 168, 170, 178],
      label: "Europe",
      borderColor: "#3cba9f",
      fill: false
    }, {
      data: [40, 20, 10, 40, 20, 10, 40, 20, 10, 40, 20, 10, 40, 20, 10],
      label: "Latin America",
      borderColor: "#e8c3b9",
      fill: false
    }, {
      data: [6, 3, 2, 6, 3, 2, 6, 3, 2, 6, 3, 2, 6, 3, 2],
      label: "North America",
      borderColor: "#c45850",
      fill: false
    }]
  },
  options: {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js"></script>
<html>

<body>
  <div class="myChartDiv" style="width: 600px;">
    <canvas id="myChart"></canvas>
  </div>
</body>

</html>

If you only want to hide the gridlines inside the drawing area you can set drawOnChartArea: false, see this great answer below.

2👍

You pass in options > scales > x > grid > display:false

Example:

let myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: { grid:{ display:false } }, // will hide vertical gridlines
      y: { grid:{ display:true } } // will show horizontal gridlines
    },
  }
});

So in your case:

<script>
new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: [1800,1850,1900],
    datasets: [{ 
        data: [86,114,106],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }, { 
        data: [40,20,10],
        label: "Latin America",
        borderColor: "#e8c3b9",
        fill: false
      }, { 
        data: [6,3,2],
        label: "North America",
        borderColor: "#c45850",
        fill: false
      }
    ]
  },
  options: {
    title: {
      display: true,
      text: 'World population per region (in millions)'
    },
    scales: {
      x: { grid:{ display:false } },
      y: { grid:{ display:true } }
    }
  }
});
</script>

2👍

You can set the drawOnChartArea in the grid options to false, also your title does not work since its configured in the wrong namespace, it has to be configured in the plugins section:

const 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: {
          drawOnChartArea: false
        }
      },
      x: {
        grid: {
          drawOnChartArea: false
        }
      },
    },
    plugins: {
      title: {
        display: true,
        text: 'Title of the chart'
      }
    }
  }
}

const 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.7.0/chart.js"></script>
</body>

Leave a comment