highchartsreact-highcharts

solidgauge linecap round single side

Is there a way to only have a single round end on the solidGauge chart?

example to implement

I already have this codepen to show the base, but even if I'm not able to remove the rounded, how do I prevent the series line from expanding outside of the graph?

plotOptions: {
    solidgauge: {
        dataLabels: {
            enabled: false,
        },
        linecap: 'round',
        stickyTracking: false,
        rounded: true
    }
}
Solution

  • I was able to get the desired layout.

    The difference is on the Pane config:

    pane: {
    center: ['50%', '100%'],
    size: '150%',
}

    By setting the "center" to "100%", it will start lower, so it will remove the lower edge. We also need to remove the animation on the:

    plotOptions: {
    solidgauge: {
        animation: false // Disable animation
    }
}

    This is probably related to some sort of bug from highcharts because if there is an animation, on the end it will "jump" and show the lower rounded corner.

    It can be checked on the https://codepen.io/SrPatinhas/pen/JjVOLqP with both examples.