Chartjs chart with only one axis

Question

Chartjs one line chart without grid, axis and tick labels.

I want to draw chart something like above.

I don't want axes labels, tick labels and grid lines, only one line which will progress on the right as data (X values) added to the chart. I want to display labels on the dots added to the chart. Can we have only one axis (X) in the chart?

I did try below:
https://jsfiddle.net/Lxya0u98/2/

My data set is as below:

{
  data: [{x:1, y:0}, {x:2, y:0}, {x:3, y:0}],
  showLine: true,  
  borderWidth: 1.5,
  borderColor: "blue",
  pointBackgroundColor: "blue",
  pointBorderColor: "blue",
  pointRadius: 5,
}

Answer 1

According to the comment from User7723337, the plugin chartjs-plugin-datalabels doesn't work with Chart.js version 3.0.0-beta.7.

As an alternative, you can draw the data labels directly on the canvas using the Plugin Core API. The API offers a number of hooks that can be used to perform custom code. In your case, you could use the afterDraw hook together with CanvasRenderingContext2D.

Note that I linked Plugin Core API with the Chart.js v2.x documentation because I couldn't find a corresponding section for v3.x. Apparently however, this is still also working with v3.x.

Please take a look at below code that uses Chart.js version 3.0.0-beta.7.

new Chart('line-chart', {
  type: "line",
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.ctx;
      ctx.save();
      var xAxis = chart.scales['x'];
      var yAxis = chart.scales['y'];      
      chart.data.labels.forEach((l, i) => {
        var x = xAxis.getPixelForTick(i);
        var y = yAxis.getPixelForValue(0);
        ctx.textAlign = 'center';
        ctx.font = '12px Arial';
        ctx.fillText(l, x, y - 14);
      });
      ctx.restore();
    }
  }],
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7],
    datasets: [{
      data: [0, 0, 0, 0, 0, 0, 0],
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: 4,
      pointHoverRadius: 4,
    }],
  },
  options: {
    layout: {
      padding: {
        left: 10,
        right: 10
      }
    },
    plugins: {
      legend: {
        display: false
      },
      tooltip: {
        enabled: false
      }
    },    
    scales: {
      y: {
        display: false,
      },
      x: {
        display: false,
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.7/chart.min.js"></script>
<canvas id="line-chart" height="30"></canvas>

Answer 2

If you define options ticks.display: false together with gridLines.display: false on both axes, it should work fine.

Please take a look at below sample code and see how it works.

new Chart('line-chart', {
  type: "line",
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7],
    datasets: [{
      data: [0, 0, 0, 0, 0, 0, 0],
      backgroundColor: "#0168FF",
      borderColor: "#0168FF",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,      
      lineTension: 0,
      pointBorderColor: "blue",
      pointRadius: 4,
      pointHoverRadius: 4,
    }],
  },
  options: {
    plugins: {
      datalabels: {
        align: 'top',
        formatter: function(value, context) {
          return context.dataIndex + 1;
        }
      }
    },
    layout: {
      padding: {
        right: 10
      }
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      yAxes: [{        
        ticks: {
          display: false
        },
        gridLines: {
          display: false,
        }
      }],
      xAxes: [{
        ticks: {
          display: false
        },
        gridLines: {
          display: false
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="line-chart" height="30"></canvas>