Question

0

294

Vistas

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 Respuestas

Responde la pregunta

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 Denunciar

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 Denunciar

Responde la pregunta

Encuentra empleos remotos

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

294

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

3 Respuestas

0

0

0

Encuentra empleos remotos

Andres GPT