Shorten The Label Text on Gannt Chart

Support
#1

Hi,

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.

milestone_chart_sample

Found out there is a function that seems useful.

 graph.setLabelFunction(new JsFunction(
            "function(event){" +
                        "console.log(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

#3

Hello,

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=" ">
    <charts:labelFunction>
        function(event) {
          console.log('event');
          return "cuba";
        }
    </charts:labelFunction>
</charts:graph>

Or in the controller:

@Inject
private SerialChart serialChart;

@Subscribe
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" +
                    "}"));
}