Google Charts API: Re-enable column header wrapping?

Question

There is a new Google Charts API released (https://developers.google.com/chart/interactive/docs/release_notes#april-30-2015) which disables the column header wrapping for table charts. How can I re-enable this?

score 9 · Accepted Answer · answered Aug 26 '15 at 19:55

9

Assign a css class name to headerCell, it can even be blank. This will cause the text to wrap...

Add this to your table chart options...

  cssClassNames: {headerCell: 'googleHeaderCell'}

Add this css somewhere on your page...

  .googleHeaderCell {}

answered Aug 26 '15 at 19:55

WhiteHat

1

Thank you, this works perfectly! But how in hell could I have known that? Google's own documentation doesn't seem to have such hints. Or have I missed something like that? – André Aug 29 '15 at 10:26
2

Cheers! The [Configuration Options](https://developers.google.com/chart/interactive/docs/gallery/table#configuration-options) reference the `cssClassNames`, but it doesn't mention wrapping. I only know because I use the table chart a lot and have tried numerous styles. The header row has some issues, when the headings _do_ wrap, the center alignment can look funny sometimes, left or right works best. – WhiteHat Aug 29 '15 at 13:05
@WhiteHat hey! this answer helped me solve this on my quesiton. Thanks! I have this question about background color in case you know that one and want to answer it. I haven't found the solution for that one yet. Best! https://stackoverflow.com/questions/71244433/google-apps-script-tablechart-how-to-use-cssclassnames – Luis Alberto Delgado de la Flo Feb 24 '22 at 15:16

score 0 · Answer 2 · answered Aug 07 '22 at 17:34

0

The answer worked great, In terms of 'adding to chart options' It can work like this:

  table.draw(dataTable, {
    showRowNumber: false,
    width: "100%",
    height: "100%",
    cssClassNames: {headerCell: 'googleHeaderCell'}
  });

answered Aug 07 '22 at 17:34

kztd

2 Answers2