Vaadin Charts 2.1 scatter label issue

Flow
1

Vaadin charts 2.1 seems to now have a “feature” where it doesn’t display some of the labels in scatter and bubble charts where they overlap with other labels.

Is there a way to turn this feature off and have all the labels displayed as in previous versions?

Thanks.

Iain

2

Hi Iain,

I did some tests resizing a chart with data labels and seems that overlapping label hiding was already done in previous versions.

It is possible that an upgrade in highcharts library caused the collision detection to be more strict.

Could you provide a simple example of chart configuration where labels are hidden with 2.1 and not with 2.0?

3

Hi Gillermo,

The following chart displays overlapping labels with 2.0 but not with 2.1. The Highcharts API implies that you can switch off the collision detection (maybe it was the default in previous versions to allow collisions), but this sin’t exposed thru’ Vaddin charts.
[code]
public static Chart drawTestBubble(){
double xval = { 40, 50, 55, 30,25,20};
double yval = { 80, 60, 62, 20, 24, 26};
double zval = { 5, 8, 7, 10,4,6};
String names = {“average bugs”,
“fixed bugs”,
“new features”,
“features removed”,
“some other text”,
“a very long piece of text with no end in sight”};

    Chart chart = new Chart(ChartType.BUBBLE);

    Configuration conf = chart.getConfiguration();
    conf.setTitle( "Test label overlap");
    conf.getLegend().setEnabled(false); // Disable legend

    conf.getyAxis().setTitle("Y axis title");
    conf.getyAxis().setMin(0);
    conf.getyAxis().setMax(100);
    conf.getyAxis().setGridLineWidth(0);

    conf.getxAxis().setTitle("X axis title");
    conf.getxAxis().setMin(0);
    conf.getxAxis().setMax(100);
    conf.getxAxis().setGridLineWidth(0);

    conf.disableCredits();
    DataSeries series = new DataSeries();
    for( int i = 0; i < 6; i++){
        DataSeriesItem point = getBubbleItem(xval[i]

,yval[i]
, zval[i]
);

        point.setName(names[i]

);

        series.add(point);    
    }
    PlotOptionsBubble options = new PlotOptionsBubble();
   
    Labels labs = new Labels(true);
    labs.setFormatter(
            "this.point.name");
    options.setDataLabels( labs);
    series.setPlotOptions(options);
    conf.addSeries(series);
    chart.drawChart();

    return chart;
}
public static DataSeriesItem getBubbleItem(Number number, Number number2, Number number3) {
    DataSeriesItem3d dataSeriesItem = new DataSeriesItem3d();
    dataSeriesItem.setX(number);
    dataSeriesItem.setY(number2);
    dataSeriesItem.setZ(number3);
    return dataSeriesItem;
}

[/code]

I am on vacation the next 2 weeks but would appreciate any help you can give.
BR
Iain

4

Hi Iain,

You are right, highcharts added an allowOverlap property to labels object in latest version (4.1.x), and there’s no java API in vaadin charts to configure it yet.

As a workaround you can sublcass Labels class and add the property

public class LabelsWithOverlap extends Labels {

    private Boolean allowOverlap;

    public LabelsWithOverlap() {
        super();
    }

    /**
     * Creates a new enabled or disabled label
     * 
     * @param enabled
     *            true to enable, false to disable
     */
    public LabelsWithOverlap(boolean enabled) {
        super(enabled);
    }

    public Boolean getAllowOverlap() {
        return allowOverlap;
    }

    public void setAllowOverlap(Boolean allowOverlap) {
        this.allowOverlap = allowOverlap;
    }

}

I’ve just created a ticket reporting the missing API

https://dev.vaadin.com/ticket/18513

5

Thanks Guillermo, that works fine

6

Vaadin Charts 2.1.2 was released fixing the
related issue
. Check it out from the
directory