Labeling column charts with numbers

[jotaporras]

Hello, I have been using chartkick and I'm very happy with the work it saves me while using Google Charts. However, I have a particularly specific requirement to put the value labels on my column chart, like on the last example of this section in the Google Charts API (the one with the numbers inside of the bar of each element). Is there any way to pass the DataView needed (or the role: annotation column to the datatable) to make this work? Or maybe there's some library option (I haven't been able to find it yet) that would do the same thing.

https://developers.google.com/chart/interactive/docs/gallery/barchart#labeling-bars

I have been surfing through the source code a bit, but I couldn't come up with a way to add this functionality

[bermann]

I am looking to do the same. Would appreciate some information about this.

[jotaporras]

I moved on from the project where I needed this and never came around writing the solution, however if you would like to try yourself, perhaps you should take a look at this part of the code on line 559

this.renderLineChart = function (chart) {
        waitForLoaded(function () {
          var options = jsOptions(chart.data, chart.options);
          var data = createDataTable(chart.data, chart.options.discrete ? "string" : "datetime");
          chart.chart = new google.visualization.LineChart(chart.element);
          resize(function () {
            chart.chart.draw(data, options);
          });
        });
      };

Here is where linecharts are generated. You could pass one of the chart options to createDataTable so that the function creates the required column parameters, as shown in the link that I shared. You would also have to modify "createDataTable" to accept the parameter on line 517 and then create the column parameters. This would probably make it work for the other chart types as well. I don't know how to make it work in Highcharts, though.

var createDataTable = function (series, columnType,columnLabels) {
//(...)
if(columnLabels){
//view.setColumns(...) for every column in the chart's datatable.
}

I never got around to actually doing it but that's probably how it would have went down. Hope this helps!

[ankane]

Cleaning up issues. Still no official support for this.