google / google-visualization-issues

288 stars 35 forks source link

Set column to wrap text #2975

Open billyz313 opened 1 year ago

billyz313 commented 1 year ago

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" }); and dataTable.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. screen_shot

billyz313 commented 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.

6r33z3 commented 1 year ago

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.