How to break the line in tooltip using google chart?-CodePudding

I'm trying to break a line in the code below, but I can't.

this is the complete code

<html>

<head>
  <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([
        ['Range', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', {role: 'tooltip', p:{html:true}}],
        ['2010<br>September', 1, 2, 3, 4, 5, 6, 7, 8, 9, 50, 'start<br>end'],
      ]);

      var view = new google.visualization.DataView(data);
      //view.setColumns([ 1, 2, 3, 4, 5, 6, 7, 8, 9,10]);

      var options = {
        width: 900,
        height: 500,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '100%' },
        isStacked: 'percent',
        tooltip: {isHtml:true},
        series: {
          0: { color: 'red' },
          1: { color: 'green' },
          2: { color: 'red' },
          3: { color: 'green' },
          4: { color: 'red' },
          5: { color: 'green' },
          6: { color: 'red' },
          7: { color: 'green' },
          8: { color: 'red' },
          9: { color: '#03254c' }
        }
      };

      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
    }
  </script>
</head>

<body>
  <div id="barchart_values" style="width: 900px; height: 500px;"></div>
</body>

</html>

Note that I put a br to break the line, but it doesn't work

'2010<br>September'

If I take the Range at the beginning of the array it will give an error. This makes it not have the tooltip with the html enabled.

[EDIT] I tested putting  and it didn't work

How do I break the line?

CodePudding user response：

Use white-space: pre-wrap; in the css and in the code use \n

google.charts.load("current", {
  packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable(
    [
      ['Range', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', {
        type: 'string',
        role: 'tooltip',
        'p': {
          'html': true
        }
      }],
      [
        '2010\nSeptember',
        1, 2, 3, 4, 5, 6, 7, 8, 9, 50,
        'start\nend'
      ],
    ]
  );

  var view = new google.visualization.DataView(data);

  var options = {
    width: 900,
    height: 500,
    legend: {
      position: 'top',
      maxLines: 3
    },
    bar: {
      groupWidth: '100%'
    },
    isStacked: 'percent',
    tooltip: {
      isHtml: true
    },
    series: {
      0: {
        color: 'red'
      },
      1: {
        color: 'green'
      },
      2: {
        color: 'red'
      },
      3: {
        color: 'green'
      },
      4: {
        color: 'red'
      },
      5: {
        color: 'green'
      },
      6: {
        color: 'red'
      },
      7: {
        color: 'green'
      },
      8: {
        color: 'red'
      },
      9: {
        color: '#03254c'
      }
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
  chart.draw(view, options);
}

.google-visualization-tooltip {
    border: solid 1px #bdbdbd;
    border-radius: 2px;
    background-color: white;
    position: absolute;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
    font-size: 11px;
    -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
    font-family: arial;
    white-space: pre-wrap;
}

.google-visualization-tooltip div {
  padding:5px;
}

<html>

<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id="barchart_values" style="width: 900px; height: 500px;"></div>
</body>

</html>