Is it possible to add multiple labels to one google-chart bar in a column chart?

Question

Is it possible to add an additional label to each bar of a columnchart without it having any bearing on the presentation of the bar the labels exist on?

This is my current chart set up

this.populationChart.myChartObject.data = {
    'cols': [
        { id: 's', label: 'Stage', type: 'string' },
        { id: 'v', label: 'Value', type: 'number' },
        { id: 'p', label: 'Percent', type: 'number' },
        { role: 'style', type: 'string' }
    ], 'rows': [
        {
            c: [
                { v: 'Meet Criteria' },
                { v: this.populationSummary.inDatabase },
                { v: this.studyService.calcPercent(this.populationSummary.inDatabase, this.populationSummary.total) },
                { v: '#e94926' }
            ]
        },
        {
            c: [
                { v: 'Invited' },
                { v: this.populationSummary.invited },
                { v: this.studyService.calcPercent(this.populationSummary.invited, this.populationSummary.inDatabase) },
                { v: '#62b8af' }
            ]
        },
        {
            c: [
                { v: 'Screened' },
                { v: this.populationSummary.screened },
                { v: this.studyService.calcPercent(this.populationSummary.screened, this.populationSummary.invited) },
                { v: '#f2673a' }
            ]
        },
        {
            c: [
                { v: 'Qualified' },
                { v: this.populationSummary.qualified },
                { v: this.studyService.calcPercent(this.populationSummary.qualified, this.populationSummary.screened) },
                { v: '#ffc828' }
            ]
        },
        {
            c: [
                { v: 'Scheduled' },
                { v: this.populationSummary.scheduled },
                { v: this.studyService.calcPercent(this.populationSummary.scheduled, this.populationSummary.screened) },
                { v: '#5a5538' }
            ]
        }
    ]
};

calcPercent = (numerator: number, denominator: number): number => {
    if (denominator === 0) {
        return 0;
    };
    if (denominator !== 0) {
        return (Math.round((numerator / denominator) * 100));
    };
};

Right now the behaviour is showing two bars per stage. One bar for value of the value label, and one bar for the percentage label.

What I want is for each bar's height to be based on the value label, and when I mouse over the bar the popup shows the value label, and that label's val, but also show the percentage label.

Basically have the bar's height/presentation only be based off the value label, but show both labels and their values when moused over.

Is this possible?

similar to the 'style' column role, you can use a 'tooltip' column role to customize the values shown on bar hover -- use this in place of the percentage column -- see this answer for an example... — WhiteHat
@WhiteHat creating a custom tooltip worked perfectly! Thank you so much for pointing me in the right direction. I was unaware that was a functionality available to me. After some messing about I've got all the bars displaying exactly what I need! Thanks again! — Chris

elf elf · Accepted Answer · 2017-08-02T20:02:41

In this example:

   var data = google.visualization.arrayToDataTable([
     ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
     ['Copper', 8.94, '#b87333', 'Cu' ],
     ['Silver', 10.49, 'silver', 'Ag' ],
     ['Gold', 19.30, 'gold', 'Au' ],
     ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
  ]);

This is the edit that must be made for the labels:

  <script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Is it possible to add multiple labels to one google-chart bar in a column chart?

1 Answers