Show label in tooltip but not x-axis for chart diagram

I am currently using a line chart with chart.js and have a set of labels that looks like ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"] . I want the corresponding label to appear in the tooltip for the chart, but only want each variable label to be displayed on the x-axis of the chart to prevent overflow. Is there any way I can achieve this?

I am currently replacing every second value from my array with "", but while it removes crowding from my x axis, it does not meet my requirement to show a label in the tooltip.

+8
javascript charts canvas
Jul 24 '15 at 6:52
source share
5 answers

Just expand the line chart and replace the xLabels you don't want after initialization

 Chart.types.Line.extend({ name: "LineAlt", initialize: function (data) { Chart.types.Line.prototype.initialize.apply(this, arguments); var xLabels = this.scale.xLabels xLabels.forEach(function (label, i) { if (i % 2 == 1) xLabels[i] = ''; }) } }); var lineChartData = { labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], datasets: [ { fillColor: "#79D1CF", strokeColor: "#79D1CF", data: [59, 80, 81, 56, 55, 40, 34, 43, 43, 12, 65, 65] } ] }; var ctx = document.getElementById("myChart").getContext("2d"); var myLine = new Chart(ctx).LineAlt(lineChartData); 



Fiddle - http://jsfiddle.net/ttz5t3dx/




enter image description here

+23
Jul 24 '15 at 9:29
source share

For those who want to achieve this on a JS V2 diagram, the following will work:

  var options = { scales: { xAxes: [{ afterTickToLabelConversion: function(data){ var xLabels = data.ticks; xLabels.forEach(function (labels, i) { if (i % 2 == 1){ xLabels[i] = ''; } }); } }] } } 

Then pass the parameter variable, as usual, to:

 myLineChart = new Chart(ctx, { type: 'line', data: data, options: options });` 
+5
Aug 16 '16 at 11:33
source share

To expand the response to potatoes, we can do:

 var xLabels = this.scale.xLabels var modVal = Math.ceil( xLabels.length / 10) xLabels.forEach(function (label, i) { if (i % modVal != 0) xLabels[i] = ''; }) 

to limit the number of tags (in this case, 10) so that your labels never get full no matter how much data you have.

+3
Aug 20 '15 at 1:32
source share

In the xAxes chart parameters, you can specify the maxTickLimit property as you like:

 xAxes: [{ ticks: { autoSkip:true, maxTicksLimit:3 } }] 

Fiddle: https://jsfiddle.net/p63z7zys/1/

+1
Dec 21 '16 at 8:39
source share

This was one of the most difficult things I encounter when using ChartJ.

I am going to share my solution: I was just playing with the parameters of the chart. First, I will define some properties for my xAxe. Please note that I format the label using callback :

 scales: { xAxes: [{ id: "x-", stacked: false, ticks: { autoSkip: false, callback: (label) => { return label + "TEST" } } } ]} 

To format the tooltip title, I will use callbacks for tooltips :

  tooltips: { callbacks: { title : (tooltipItems, data) => { var labelIndex = tooltipItems[0].index; var realLabel = data.labels[labelIndex]; return realLabel + "TOOLTIP"; } } } 

Using these chart parameters, I can show different content for the X axis labels and the corresponding tooltip headers:

enter image description here

Here you can find the full sample.

Hope this helps.

+1
Feb 22 '17 at 14:39
source share



All Articles