Vaadin Charts - Getting to the Gauge's Pivot property?

Hi, I am palying with Vaadin Charts trying to get to rid of the Gauge’s pivot (or change its color).

I can now change the color of the needle, but it does not look right with the default pivot.

Using the Highchart jsfiddle I can achieve the look I am after… eg.
gauge: {
pivot: {
radius: 0
dial: {
radius: 75, …etc
overshoot: 5

Is there a way I can manipulate parts of the Highchart structure that have not been ported over to Vaadin Charts yet?

Note that I also want access to the overshoot property which I can’t find in Vaadin Charts either.

I have had a look at chart.drawChart(json), but have not been able to get that working.

Thanks for any help…

Managed to get the setting of json working…

The problem was I copied out of jsfidle and my copy included comments, eg
... part of the json string sent to high charts String json = "{" + "chart: { " ... other stuff... + " plotBands: [{ " + " from: 0, " + " to: 6.9, " + " color: '#99DD66' // green " + " }, { " ... etc Having the javascript comment in the json string (as copied from jsfiddle) does not work… took a bit to find it, but now I can get the look I want via setting pure json… (still will be good to get the other properties in the java interface at some time).


Hi, you are right, there’s some missing API for pivot and overshoot configuration. You can create a ticket in
about it.

In the meantime as a workaround you can extend a class and add the missing API, for instance:

public class PlotOptionsGaugeWithOvershoot extends PlotOptionsGauge {

    private Number overshoot;

    public Number getOvershoot() {
        return overshoot;

    public void setOvershoot(Number overshoot) {
        this.overshoot = overshoot;