Not able to see values on bar chart

Question

I have a Chart.JS bar chart and I need to see values on bars instead of getting the mouse over each one of them to do so.

This is my chart script where I get data from PHP through AJAX and display them:

$.ajax
  ({
    url: 'stat_income_2.php',
    type: 'POST',
    data: {current_year: y},
    dataType: 'JSON',
    success:function(resp)
    {
      var costData = [];
      $.each(resp, function( key, row)
      {
        costData.push(row['cost']);
      });


        var areaChartData = {
          labels: ["January", "February", "March", "April", "May", "June", "July", "August"
          , "September", "October", "November", "December"],
          datasets: [
            {
              label: "Cash Income",
              strokeColor: "rgba(210, 214, 222, 1)",
              pointColor: "rgba(210, 214, 222, 1)",
              pointStrokeColor: "#c1c7d1",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: costData
            }
          ]
        };
        var barChartCanvas = $("#barChart2").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00c0ef";
        barChartData.datasets[0].strokeColor = "#00c0ef";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true,

          // onAnimationComplete: function () {

          // var barChartData = this.chart.barChartData;
          // barChartData.font = this.scale.font;
          // barChartData.fillStyle = this.scale.textColor
          // barChartData.textAlign = "center";
          // barChartData.textBaseline = "bottom";

          // this.datasets.forEach(function (dataset) {
          //     dataset.bars.forEach(function (bar) {
          //        barChartData.fillText(bar.value, bar.x, bar.y - 5);
          //     });
          //   })
          //}
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
      }
  });

I tried the answer from this question where I added the following script into the existing one:

var myLine = new Chart(ctx).Line(chartData, {
    showTooltips: false,
    onAnimationComplete: function () {

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.points.forEach(function (points) {
                ctx.fillText(points.value, points.x, points.y - 10);
            });
        })
    }
});

But nothing displayed, and I will roll over each bar to see values. Any help is appreciated.

score 1 · Accepted Answer · answered May 12 '16 at 12:29

1

Juste replace in your commented code

onAnimationComplete: function () {
      var barChartData = this.chart.barChartData;

By

var barChartData = this.chart.ctx

It should work.

answered May 12 '16 at 12:29

Thomas S.

98
1
8

It works but when I put the mouse by mistake on the bars the numbers disappear and I need to refresh so I can see them again – androidnation May 12 '16 at 12:35
1

I think the error comes from the tooltips. If you remove it (showTooltips: false in the options), the values stay. I am using the lastest version of Chart.JS and there are some samples provided, including showing values in a graph. I don't have any problem following the provided example. Maybe you should try upgrading to Chart.JS V2, but you will need to ajust your code because the chart creation is a little different. – Thomas S. May 12 '16 at 13:31

Not able to see values on bar chart

1 Answers1