Shorten The Label Text on Gannt Chart


I have a milestone chart derived from Gannt Chart. My problem is, labels are overlapping and some of them are too long. I do not know how to shorten the labels in the gantt charts.


Found out there is a function that seems useful.

 graph.setLabelFunction(new JsFunction(
            "function(event){" +
                        "return 'cuba';" +

The thing is I couldn’t find the label text from the ‘event’ argument. I am inexperienced in JS, so can anyone help me how to shorten the label texts?

Thanks in advance


probably, it is not quite obvious, but you should add an empty label to the graph in order to use this function, for instance:

<charts:graph id="graph1"
              labelText=" ">
        function(event) {
          return "cuba";

Or in the controller:

private SerialChart serialChart;

public void onInit(InitEvent event) {
    Graph graph = serialChart.getGraphs().get(0);
    graph.setLabelText(" ");
    graph.setLabelFunction(new JsFunction(
                    "function(event) {\n" +
                    "  console.log('event');\n" +
                    "  return \"cuba\";\n" +