Search code examples
google-apps-scriptgoogle-sheetsgoogle-visualization

How do I get a multiple-line subtitle in google sheet charts?


I am creating a bar chart in google sheet, recording it with a macro, and running the code for different data cases. When the subtitle is too long, there is missing text on the chart, shown with ellipses (...) Increasing the chart's width reveals more of the text but not all. Increasing the chart's height does nothing! (It reveals a long title, but not a long subtitle!)

Adding a line break doesn't work. When using one, all I can see is the first line of the subtitle, while the others stay completely hidden...

How can I have a subtitle that shows all of the text I want to display? Given that titles are responsive in both the horizontal and vertical axes, it's really odd for subtitles not to be.

Thank you

---- Edit ----

The script helps automate things, but I don't think that it adds new functionalities. That being said, the code I use is the following:

function Macro3() {
  var spreadsheet = SpreadsheetApp.getActive();
  var sheet = spreadsheet.getActiveSheet();
  var chart = sheet.newChart()
  .asBarChart()
  .addRange(spreadsheet.getActiveRange())
  .setMergeStrategy(Charts.ChartMergeStrategy.MERGE_COLUMNS)
  .setTransposeRowsAndColumns(false)
  .setNumHeaders(4)
  .setHiddenDimensionStrategy(Charts.ChartHiddenDimensionStrategy.IGNORE_BOTH)
  .setOption('bubble.stroke', '#000000')
  .setOption('useFirstColumnAsDomain', true)
  .setOption('isStacked', 'false')
  .setOption('su', SpreadsheetApp.getActiveSheebtitlet().getRange("B2:B2").getValue())
  .setOption('title', SpreadsheetApp.getActiveSheet().getRange("B1:B1").getValue())
  .setOption('annotations.domain.textStyle.color', '#808080')
  .setOption('textStyle.color', '#000000')
  .setOption('legend.textStyle.color', '#1a1a1a')
  .setOption('subtitleTextStyle.color', '#999999')
  .setOption('titleTextStyle.color', '#757575')
  .setOption('annotations.total.textStyle.color', '#808080')
  .setXAxisTitle(SpreadsheetApp.getActiveSheet().getRange("B4:B4").getValue())
  .setOption('hAxis.textStyle.color', '#000000')
  .setYAxisTitle(SpreadsheetApp.getActiveSheet().getRange("A4:A4").getValue())
  .setOption('vAxes.0.textStyle.color', '#000000')
  .setPosition(2, 1, 30, 0)
  .build();
  sheet.insertChart(chart);
};

I wanted to include a screenshot of the Google sheet this macro is used upon, but this is my 1st post on stackoverflow and apparently I need at least 10 reputation to post images. If you think it would help to share this screenshot and there is a neat way of doing it, please let me know. Thanks again


Solution

  • In the current state it is not possible to add multiple lines to the subtitles of Google Sheets charts. Therefore I recommend you to go to Help > Help Sheets to Improve and add this request. Alternatively, you can use this template to request this functionality for Apps Script, for example, allowing EmbeddedCharts to have titles written with HTMLService.

    Possible workarounds:

    1. Change the font size according to the string length.

    As I told you in the comments, you can measure the amount of words your subtitle has and according to that, apply different font sizes. For example:

    function calcFontSize(subtitle){
      const lenS = subtitle.split(" ").length
      if(lenS > 12) return 8
      if(len <= 12) return 12
     }
    // Inside your macro
    .setOption(
        'subtitleTextStyle.fontSize',
         calcFontSize(sheet.getRange('B2:B2').getValue())
    )
    
    • PROS : You have a "responsive" subtitle.

    • CONS: As you say In long texts ... The text becomes too small to read

    1. Use Charts Service to create your chart

    As this service allows you to add jump lines to your title, you can achieve what you want:

    function createGoogleChart() {
      // extracted from here https://developers.google.com/apps-script/reference/charts/charts
      const data = Charts.newDataTable()
        .addColumn(Charts.ColumnType.STRING, 'Month')
        .addColumn(Charts.ColumnType.NUMBER, 'In Store')
        .addColumn(Charts.ColumnType.NUMBER, 'Online')
        .addRow(['January', 10, 1])
        .addRow(['February', 12, 1])
        .addRow(['March', 20, 2])
        .addRow(['April', 25, 3])
        .addRow(['May', 30, 4])
        .build();
      const chart = Charts.newAreaChart()
        .setDataTable(data)
        .setStacked()
        .setRange(0, 40)
        .setTitle("My title\nMy long long long long long \n long long long long \n subtitle")
        .build();
      SpreadsheetApp.getActiveSheet().insertImage(
        chart.getAs('image/png'), 10, 10
      )
    }
    
    • PROS : You can achieve what you need.

    • CONS:

      • You insert a still image (not editable)
      • There is no default subtitle option
      • You have to build it from Apps Script, and adapt it to your macro