Add labels to column groups in grouped stacked column (dual-x bar) chart

22 views
Skip to first unread message

Jamie

unread,
Jan 31, 2021, 12:44:51 AM1/31/21
to Google Visualization API
I would like to adapt the grouped, stacked column (dual-x bar) chart defined at http://jsfiddle.net/dlaliberte/f7r3odo7/ and would appreciate any suggestions on the needed adaptations.

Note: This JSFiddle didn't work for me as-is. I had to copy the HTML and JS into a local file, delete the script tag in the HTML body, and add the equivalent line to the JS to load the package:
google.charts.load('current', { 'packages':['bar']});

FYI: I will be creating this chart and its data through an event listener function from the more detailed data.

Needed Adaptions
  • Layout Option 1 - Preferred - See screenshot.
    • Add column stack label above column group label.
    • Adjust legend to only show stack segment labels.
  • Layout Option 2 (especially if unable to manage colors...next item)
    • Show 2-tiered legend (like a bullet and sub-bullet list)

  • Distinguish in-stack colors. - I thought I could do this with the colors property, but it appears to only apply across stacks. Within a stack the colors appear to be limited to gradations of the assigned color (for example, shades of blue).

  • Hide all vertical axes except the first 1 or 2 (awesomely, we can have as many as we want!) - Tried textPosition:'none' - Assume I may need to programmatically assign CSS of display:none?
Thanks in advance for all suggestions!
Grouped Stacked Column Chart - Marked Up.png
Reply all
Reply to author
Forward
0 new messages