Vaadin Charts 3.2 - Error setting yAxis categories on gauge

Hi,

I tried creating a Gauge chart that looks like a “wind rose” to indicate wind direction on realtime.
I’m facing the issue when I want to change the yAxis labels from degrees to categories (N, NE, E, SW, S, SW, NW)
When setting it this way it shows only the N at the position 0 and the rest the numbers.

What gets displayed is N, 45, 90, 135,… 315

All source:

[code]
protected Component getChart() {
final Chart chart = new Chart();
chart.setSizeFull();

    final Configuration configuration = chart.getConfiguration();
    configuration.getChart().setType(ChartType.GAUGE);
    configuration.getChart().setAlignTicks(false);
    configuration.getChart().setPlotBorderWidth(0);
    configuration.getChart().setPlotShadow(false);
    configuration.getChart().setAnimation(Boolean.FALSE);
    configuration.setTitle("Wind Direction");
    Style style = new Style();
    style.setFontSize("20px");
    style.setColor(new SolidColor(25, 125, 225));
    configuration.getTitle().setStyle(style);

    configuration.getPane().setStartAngle(0);
    configuration.getPane().setEndAngle(360);
    configuration.getPane().setSize("102%");

    Background bg = new Background();
    bg.setBackgroundColor(new SolidColor(250, 250, 250));
    configuration.getPane().setBackground(bg);

    YAxis yAxis = configuration.getyAxis();
    yAxis.setMin(0);
    yAxis.setMax(359);
    yAxis.setLineColor(new SolidColor("#339"));
    yAxis.setTickColor(new SolidColor("#339"));
    yAxis.setMinorTickColor(new SolidColor("#339"));
    //yAxis.setOffset(-25);
    yAxis.setGridLineWidth(2);
    yAxis.setTickInterval(22.5);
    
    yAxis.setLineWidth(2);
    Labels labels = new Labels();
    labels.setDistance(-20);
    labels.setRotationPerpendicular();
    labels.setRotation("auto");
    labels.setStep(2);

    yAxis.setLabels(labels);
    yAxis.setType(AxisType.CATEGORY);
    yAxis.setCategories("N", "NNE", "NE", "ENE", "E", "ESE", "SES", "S", "SSW", "SW", "SWW", "W", "WNW", "NW", "NNW");
    //yAxis.setTickLength(5);
    //yAxis.setMinorTickLength(5);
    yAxis.setEndOnTick(false);

    RealTimeEntry rtData = RealTimeProvider.get();
    final ListSeries series = new ListSeries("Direction", rtData.getV6());

    PlotOptionsGauge plotOptionsGauge = new PlotOptionsGauge();
    plotOptionsGauge.setDataLabels(new DataLabels());

    GradientColor gradient = GradientColor.createLinear(0, 0, 0, 1);
    gradient.addColorStop(0, new SolidColor("#DDD"));
    gradient.addColorStop(1, new SolidColor("#FFF"));
    plotOptionsGauge.getDataLabels().setBackgroundColor(gradient);
    series.setPlotOptions(plotOptionsGauge);

    configuration.setSeries(series);

    runWhileAttached(chart, () -> {
        RealTimeEntry rtData1 = RealTimeProvider.get();
        series.updatePoint(0, rtData1.getV6());
    }, 2000, 2000);

    chart.drawChart(configuration);

    return chart;
}

[/code]Maybe this is a bug?

Best regards,
Alex Roig
29102.png

Hi,

Categories are for consecutive values 0,1… That’s why the rest of the values are skipped.
One possible solution for your problem is to use a label formatter.
I tried a simple and a bit hacky solution as a proof of concept and it worked:

Chart chart = new Chart(ChartType.GAUGE); Configuration conf = chart.getConfiguration(); conf.setTitle("Wind Direction"); YAxis yAxis = conf.getyAxis(); yAxis.setMin(0); yAxis.setMax(360); yAxis.setTickInterval(22.5); yAxis.setEndOnTick(false); Labels labels = yAxis.getLabels(); labels.setDistance(-20); labels.setFormatter("['N', 'NNE', 'NE', 'ENE','E', 'ESE', 'SE', 'SSE','S', 'SSW', 'SW', 'WSW','W', 'WNW', 'NW', 'NNW'] [this.value/22.5] "); ListSeries data = new ListSeries(68); conf.addSeries(data); And it seems to work as expected. You can read more about formatter in
vaadin docs

Hope this helps,

Guille

Gracias Guille!

Your solution works perfectly.

Best regards,
Alex Roig

That’s great to hear, de nada!