I am using latest version of Chart Js. I need to always show label in chart (without mouse over). Is it possible? If yes, then please help me with working example code.

Thank you.

My Current Chartjs code:

var ctx = $("#myChart");
var label = ctx.data('clabel').split(',');
var val = ctx.data('cval').split(',');


var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: label,
        datasets: [{
            label: 'Daily Capital',
            data: val,
            backgroundColor: [
                'rgba(0, 153, 34, 0.5)',
            ],
            borderColor: [
                'rgba(0, 153, 34, 1);',
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            display: false,
        },
        animation: {
            duration: 0, // general animation time
        },
        hover: {
            animationDuration: 0, 
        },
        responsiveAnimationDuration: 0, // animation duration after a resize
        elements: {
            line: {
                tension: 0, // disables bezier curves
            },
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data){
                    return '£' + tooltipItem.yLabel;
                },
                title: function(tooltipItem, data){
                    return '';
                },
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }       
});

I hope someone can help. Thank you in advance

I am using latest version of Chart Js. I need to always show label in chart (without mouse over). Is it possible? If yes, then please help me with working example code.

Thank you.

My Current Chartjs code:

var ctx = $("#myChart");
var label = ctx.data('clabel').split(',');
var val = ctx.data('cval').split(',');


var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: label,
        datasets: [{
            label: 'Daily Capital',
            data: val,
            backgroundColor: [
                'rgba(0, 153, 34, 0.5)',
            ],
            borderColor: [
                'rgba(0, 153, 34, 1);',
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        legend: {
            display: false,
        },
        animation: {
            duration: 0, // general animation time
        },
        hover: {
            animationDuration: 0, 
        },
        responsiveAnimationDuration: 0, // animation duration after a resize
        elements: {
            line: {
                tension: 0, // disables bezier curves
            },
        },
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data){
                    return '£' + tooltipItem.yLabel;
                },
                title: function(tooltipItem, data){
                    return '';
                },
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }       
});

I hope someone can help. Thank you in advance

• javascript
• charts
• chart.js

Share Improve this question Follow asked Sep 28, 2017 at 4:22 sonillsonill 56844 gold badges1010 silver badges2121 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This could be solved by adding the options onAnimationComplete and tooltipevents.

onAnitmationComplete functions calls the showToolTip method to show the tooltips like a hover event does.

Usually tooltipevents are define to show tooltips but here an empty array need to be passed. Check the below fiddle example for line chart.

var options = {
  tooltipTemplate: "<%= value %>",

  showTooltips: true,

  onAnimationComplete: function() {
    this.showTooltip(this.datasets[0].points, true);
  },
  tooltipEvents: []
}

Note : This approach does not support multi data-sets in line and bar charts, but does support multi data-sets in pie charts

var data_line = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(220,220,220,1)",
    pointColor: "rgba(220,220,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [65, 59, 80, 81, 56, 55, 40]
  }]
};


var options = {
  tooltipTemplate: "<%= value %>",

  showTooltips: true,

  onAnimationComplete: function() {
    this.showTooltip(this.datasets[0].points, true);
  },
  tooltipEvents: []
}

var context = $('#chart3').get(0).getContext('2d');
var chart = new Chart(context).Line(data_line, options);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<div id="chartContainer">
  <canvas id="chart3" width="500" height="500"></canvas>
</div>

options: {
             legend: {
               display: false
             },
             hover: {
               animationDuration: 0
             },
             animation: {
               onComplete: function() {
                 const chartInstance = this.chart,
                   ctx = chartInstance.ctx;

                 ctx.font = Chart.helpers.fontString(
                   18,
                   Chart.defaults.global.defaultFontStyle,
                   Chart.defaults.global.defaultFontFamily
                 );
                 ctx.textAlign = "center";
                 ctx.textBaseline = "bottom";

                 this.data.datasets.forEach(function(dataset, i) {
                   const meta = chartInstance.controller.getDatasetMeta(i);
                   meta.data.forEach(function(bar, index) {
                     const data = dataset.data[index];
                     ctx.fillStyle = "#000";
                     ctx.fillText(data, bar._model.x, bar._model.y - 2);
                   });
                 });
               }
             },
             tooltips: {
               enabled: true
             },
             responsive: true,
             scales: {
               xAxes: [
                 {
                   display: true,
                   gridLines: {
                     drawOnChartArea: false
                   }
                 }
               ],
               yAxes: [
                 {
                   display: true,
                   gridLines: {
                     drawOnChartArea: false
                   },
                   ticks: {
                     precision: 0
                   }
                 }
               ]
             }
           }