Question

0

295

Views

How can I keep the vertical lines under the horizontal ruler line is chartjs?

Chartjs Version: 3.7.0 (any guru suggesting another version? comment below!)

I have this code:

<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)'
    }
  }
});
</script>

and this chart looks like this:

Question: How can I keep the lines I have circled with red in the picture below but remove the lines I have circled with yellow ? (I want to remove all the vertical lines).

I want to make it look (wireframe wise) like this:

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report

0

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>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-06T02:56:35.644Z

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.

0

295

How can I keep the vertical lines under the horizontal ruler line is chartjs?

3 answers

0

0

0

Find remote jobs

Andres GPT