javascriptchartschart.js

Chart.JS - Remove only the second vertical line

I have a very simple Chart.JS line graph. I have setup everything, but the designer wants to remove the first and the last x lines and needs the labels at the center of the chart. I have tried several ways to remove these lines, but they don't work.

My code:

new Chart(stats, {
      type: 'line',
        data: {
            labels: ['', '', '2021', '2022', '2023', '2024', '', ''],
            datasets: [{
                data: [, , 100, 300, 200, 450],
                borderWidth: 4,
                borderColor: '#7168BD',
                backgroundColor: 'rgba(241, 163, 60, 0.1)',
                pointRadius: 5,
                pointHoverRadius: 8,
                pointBackgroundColor: "#7168BD"
            },
            {
                data: [, , 250, 200, 250, 400],
                borderWidth: 4,
                borderColor: '#B6A76E',
                backgroundColor: 'rgba(230, 57, 70, 0.1)',
                pointRadius: 5,
                pointHoverRadius: 8,
                pointBackgroundColor: "#B6A76E"
            }]
        },
        options: {

            scales: {

                y: {
                    grid: {
                        color: '#B0B0B0',
                        borderColor: 'transparent'
                    }
                },
                x: {
                    grid: {
                        color: '#B0B0B0',
                        borderColor: 'transparent',
                    }
                }
            },
            plugins: {
                legend: {
                    display: false,
                }
            },
            responsive: true
        }
    });
<canvas id="stats"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

enter image description here

Solution

  • Refer to the answer on How to remove excess lines on X axis using chartjs? and the sample in Grid Configuration, you can customize the gridline so that it won't display the first and last vertical lines.

    Also, I make some changes so that you don't need to have another additional empty strings on the first and last in the labels array.

    new Chart(stats, {
  type: 'line',
  data: {
    labels: ['', '2021', '2022', '2023', '2024', ''],
    datasets: [
      {
        data: [null, 100, 300, 200, 450, null],
        borderWidth: 4,
        borderColor: '#7168BD',
        backgroundColor: 'rgba(241, 163, 60, 0.1)',
        pointRadius: 5,
        pointHoverRadius: 8,
        pointBackgroundColor: '#7168BD',
      },
      {
        data: [null, 250, 200, 250, 400, null],
        borderWidth: 4,
        borderColor: '#B6A76E',
        backgroundColor: 'rgba(230, 57, 70, 0.1)',
        pointRadius: 5,
        pointHoverRadius: 8,
        pointBackgroundColor: '#B6A76E',
      },
    ],
  },
  options: {
    scales: {
      y: {
        grid: {
          color: '#B0B0B0',
          borderColor: 'transparent',
          drawBorder: true,
          drawOnChartArea: true,
          drawTicks: false,
        },
      },
      x: {
        grid: {
          color: function (context) {
            if (
              context.index === 0 ||
              context.index === context.chart.scales.x.ticks.length - 1
            ) {
              return 'transparent';
            }

            return '#B0B0B0';
          },

          borderColor: 'transparent',
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
    },
    responsive: true,
  },
});

    Demo @ StackBlitz