Open billyz313 opened 1 year ago
I also thought maybe you might need to know I am using it in the visualization dashboard. I can get other css properties to work fine:
dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
chart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'chartdiv',
'options': {
timeline: {
rowLabelStyle: {
fontName: 'Helvetica',
overflowWrap: 'word-break',
flexWrap: 'wrap',
fontSize: 24,
color: '#603913'
}
}
}
});
control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 3,
'ui': {
'chartView': { 'columns': [3, 4] },
height: 50
}
}
});
dash.bind([control], [chart]);
Using the above the font changes as described in the css, but nothing stops the row label from being truncated.
Unfortunately there's no viable way of doing this, which has been a long term issue persisted many years: https://github.com/google/google-visualization-issues/issues/690
My workaround would involve adding a large width
property to options
(which value requires a bit trial and error to avoid text being wrapped), so canvas of svg is being forced to render into the target resolution.
I am in need of a way to make a column in a DataTable wrap the text if it has overflow. Currently it cuts it off and puts ellipse in it's place. I tried adding
dataTable.addColumn({ type: "string", id: "Name", 'cssClassNames': "wrapme" });
anddataTable.addColumn({ type: "string", id: "Name", "style": "overflow-wrap:word-break;"});
Neither helped.In the figure below you can see exactly what I am trying to avoid. instead of the ... which is circled, I need it to wrap the text to the next line. There doesn't seem to be a way to tell it not to cut the text, and to wrap it, please advise.