1

I found a post from 2015 that says that column roles are not supported on Material Design charts. However, on the official documentation, I cannot find any note of it so wondering if that has changed.

I am adding an annotation role, but it doesn't seem to have any effect. Same of other roles, eg tooltip. For tooltip I might be able to work around that using the formatted value of cell, but still don't know how to add html content.

Here is my code :

      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness', { role: 'annotation' }],
          ['Canis Major Dwarf', 8000, 23.3, "BR"],
          ['Sagittarius Dwarf', 24000, 4.5 , "ME"],
          ['Ursa Major II Dwarf', 30000, 14.3 , "BR"],
          ['Lg. Magellanic Cloud', 50000, 0.9, "DA"],
          ['Bootes I', 60000, 13.1 , "ME"]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          },
          focusTarget: 'category',
          crosshair: {
                trigger: 'selection',
                },
        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };

The annotation isn't shown anywhere. What am I missing? jsfiddle link here.

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
ghostrider
  • 5,131
  • 14
  • 72
  • 120
  • column roles are not supported by material charts -- [this answer](https://stackoverflow.com/a/46074199/5090771) has an example for adding annotations manually -- and although column roles are not specifically mentioned, you can find options which are not supported by material charts [here](https://github.com/google/google-visualization-issues/issues/2143) – WhiteHat Feb 14 '22 at 15:10
  • Thanks @WhiteHat. I guess based on a previous thread and your answer in https://stackoverflow.com/questions/70927549/react-google-charts-for-dual-y-stacked-bar-charts if I want multiple stacks I must go Material Charts - with the features being missing. It seems I need a stacked bar chart with quite custom tooltips and annotations - so from what I understand I need to go `Material charts` and then tweak the HTML code as your example? – ghostrider Feb 14 '22 at 15:29
  • 1
    that's right, but just realized the annotation example won't work as-is for material charts because `getChartLayoutInterface` is not available for material -- it is mainly used to find the placement of the annotation, you could possibly use `getBBox` instead – WhiteHat Feb 14 '22 at 17:11

0 Answers0