Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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:
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;
}
Maybe this is a bug?
Best regards,
Alex Roig
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