MeterChart value label overlaps chart

[AHijner]

Hi,

I'm trying to implement a new MeterChart with Charba, and am running into a strange issue where the ValueLabel overlaps with the actual meter, like so: This happens eg. when the window it is shown in is not maximized, or if you have zoomed. It seems like a padding issue. If the window containing the chart is large enough, the overlap dissapears. The actual chart-size seems irrelevant as changing the inital height/width percentage of the chart doesn't have an effect. The font is auto-sizing, and always seems like it would fit. Setting the font to always be very small doesn't have an effect. I've tried adjusting many things, such as initial height, cutout percentage etc. The only thing that seems to have any effect is setting the radius or height/width to a specific px value, this will fix the issue, even for small values. Changing the radius/height/width percentage doesn't have any effect. However, this is not a desirable fix for me, as I would like the chart to be responsive. Hiding the valueLabel also fixes the issue, but of course I would like to show the value.

The code:

        MeterChartWidget perfectStatusChart = new MeterChartWidget();
        perfectStatusChart.getOptions().getTitle().setText("Goed");
        perfectStatusChart.getOptions().getTitle().setDisplay(true);

        MeterDataset perfectStatusDataset = perfectStatusChart.newDataset();
        perfectStatusDataset.getDescriptionLabel().setContent("Leerlingen");
        perfectStatusDataset.getDescriptionLabel().setDisplay(true);
        perfectStatusDataset.setColor("green");
        perfectStatusDataset.getValueLabel().setColor("green");
        perfectStatusDataset.getValueLabel().setPrecision(0);
        perfectStatusDataset.setValue(10);
        perfectStatusDataset.setMax(50);
        perfectStatusChart.getData().setDatasets(perfectStatusDataset);

        WidgetCanvas perfectChartPane = new WidgetCanvas(perfectStatusChart);

Another example so you can see the initial chart size is irrelevant. First: radiusPercentage=60%, second: normal, third: height/width = 200%

Additional info: We're running Charba 6.4, Java 21, GWT 2.10, SmartGWT 13

I'm curious if you've come across this issue or something similar before. Is there a setting that might fix this issue? Is it something inherent to Chart.JS? Let me know if you need any additional info!

[stockiNail]

@AHijner thank you for feedback. This is a bug of Charba. Meter chart is a Charba customization (controller) on top of Chart.js. Unfortunately there isn't any easy workaround but I know where the issue is occurring. I'll have a look asap.

[AHijner]

@stockiNail Thanks for the quick and clear response, and for looking into it :)

[stockiNail]

@AHijner FYI I have fixed in master. Commit: https://github.com/pepstock-org/Charba/commit/9e55bfde46ff51886ef1d33ec0456a8ea598466c

We are quite busy in this period on another project but I'll do my best to release it in new Charba version asap.

[AHijner]

Thank you so much! Looking forward to the release :)

[stockiNail]

@AHijner we have published new Charba version 6.5. It will be available on MVN repo soon. Thank you very much again.

[stockiNail]

@AHijner can you tell me if new version has solved the issue? Thank you !

[AHijner]

@stockiNail Sorry for the late reply, I was busy with some other work-stuff. But the fix works excellently, thank you very much! :)

[stockiNail]

THANK YOU @AHijner !