Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

show label in tooltip but not in x axis for chartjs line chart

I currently am using a line chart with chart.js, and have a label set that looks like this ["January 2015", "February 2015", "March 2015", "April 2015", "May 2015", "June 2015"]. I want the relevant label to show up in the tooltip for the chart, but only want every alternating label to show up on the x axis of the chart to prevent crowding. Is there a way I can achieve this ?

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

like image 727
vsank7787 Avatar asked Jul 24 '15 06:07

vsank7787


People also ask

How do I add a chart in tooltips?

To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), and the second one contains the bars. In this second column, we then add HTML <div> tags and define the width of these boxes with our numerical columns.

How do I remove a dot in ChartJS?

You can set the pointRadius to zero. I've added "borderWidth: 1" and "pointRadius: 0.5" because I also needed a fine line and tiny dots to hover over them. I needed to add pointHitRadius: 0 as well to disable tooltips.

What is a chart tooltip?

Tooltips: an introduction Tooltips are the little boxes that pop up when you hover over something. (Hovercards are more general, and can appear anywhere on the screen; tooltips are always attached to something, like a dot on a scatter chart, or a bar on a bar chart.)


2 Answers

For anyone looking to achieve this on Chart JS V2 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 options variable as usual into a:

myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});`
like image 110
George D Avatar answered Oct 16 '22 07:10

George D


Just extend the line chart and replace the xLabels you don't want after your 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

like image 23
potatopeelings Avatar answered Oct 16 '22 07:10

potatopeelings