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,
}

not exactly one line chart, but give [SparkLine a look](https://github.com/fnando/sparkline), might interest you... — balexandre, Dec 23 '20 at 15:46
I am not able to remove or hide ticks and labels I dd try xAxes: { display: true, }, yAxes: { display: false, } } — User7723337, Dec 23 '20 at 15:46

score 1 · Accepted Answer · answered Dec 23 '20 at 16:35

1

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>

answered Dec 23 '20 at 16:35

uminder

23,831
5
37
72

Can we avoid using a plugin for the labels and use something that is provided by chartjs? – User7723337 Dec 24 '20 at 04:17
As far as I know, Chart.js has no inbuilt feature for drawing value labels. You can use its Plugin Core API and programmatically draw the labels directly on the canvas. – uminder Dec 24 '20 at 04:47
Basically, I want to display dots denoting sections, using the code I always get a dot at the end which is actually a data set endpoint. Please refer updated image in the question. – User7723337 Dec 24 '20 at 04:56
@User7723337: You really shouldn't change the original question after you got an acceptable answer for it. It's recommended to simply post a new question for the new issue. – uminder Dec 24 '20 at 05:38
The plugin "chartjs-plugin-datalabels" is not working with Chart.js version 3.0.0-beta.7. Although the plugin mentions support for 2.7 and above, we get errors. We get errors when we try to load this plugin. Is there another way to have these labels in Chart.js 3.x version? – User7723337 Dec 28 '20 at 13:27
@User7723337: I posted a new answer that illustrates how to draw data labels with Chart.js v3.x. – uminder Dec 28 '20 at 14:16

score 1 · Answer 2 · answered Dec 28 '20 at 14:15

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>

Chartjs chart with only one axis

2 Answers2