Search code examples
tooltipchart.js

Display all tooltips in chartjs


I'm using http://www.chartjs.org/ to create a simple line graph.

Now I want to show all tooltips. I do not want default on Hover behaviour. I am certain that at any moment I will not have more than 10-12 points on graph. So I want the tooltips to be always open.

If this is not possible with ChartJS, I'm open for opting for other library.


Solution

  • I don't know if this is possible with chartjs (a quick search did not reveal anything) but I think what you want is possible using highcharts. Here you can use the datalabels option:

    plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
    

    Here is a demo. Does that help?

    EDIT:

    Another possibility for free could be jqPlot. For a demo have look here! There is a pointLabels plugin which places labels on the plot at the data point locations. Should do the trick. :)

    var plot1 = $.jqplot('chart1', [line1], {
          title: 'Point Labels', 
          seriesDefaults: { 
            showMarker:false,
            pointLabels: { show:true } 
          }
      });
    

    Cheers and good luck.