CODEWITHSUNDEEP
javascriptangularjshighcharts
Tyager
Tyager

Reputation: 155

Is there a way to cap Highchart's Gauge at the max

Im looking to have a set min and max (0-200) and to cap the gauge line at the 200. The data could be over 200, but the line on the gauge would still need to cap at 200.

Is there a parameter to do this?

chart: {
    type: 'gauge',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false
},

title: {
    text: 'Speedometer'
},

pane: {
    startAngle: -150,
    endAngle: 150,
    background: [{
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#FFF'],
                [1, '#333']
            ]
        },
        borderWidth: 0,
        outerRadius: '109%'
    }, {
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#333'],
                [1, '#FFF']
            ]
        },
        borderWidth: 1,
        outerRadius: '107%'
    }, {
        // default background
    }, {
        backgroundColor: '#DDD',
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
    }]
},

// the value axis
yAxis: {
    min: 0,
    max: 200,

    minorTickInterval: 'auto',
    minorTickWidth: 1,
    minorTickLength: 10,
    minorTickPosition: 'inside',
    minorTickColor: '#666',

    tickPixelInterval: 30,
    tickWidth: 2,
    tickPosition: 'inside',
    tickLength: 10,
    tickColor: '#666',
    labels: {
        step: 2,
        rotation: 'auto'
    },
    title: {
        text: 'km/h'
    },
    plotBands: [{
        from: 0,
        to: 120,
        color: '#55BF3B' // green
    }, {
        from: 120,
        to: 160,
        color: '#DDDF0D' // yellow
    }, {
        from: 160,
        to: 200,
        color: '#DF5353' // red
    }]
},

series: [{
    name: 'Speed',
    data: [555],
    tooltip: {
        valueSuffix: ' km/h'
    }
}]

Upvotes: 2

Views: 995

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You can use plotOptions.gauge.wrap: false to prevent wrapping around.

The API description:

wrap: Boolean

When this option is true, the dial will wrap around the axes. For instance, in a full-range gauge going from 0 to 360, a value of 400 will point to 40. When wrap is false, the dial stops at 360. Defaults to true.

Example usage (JSFiddle):

plotOptions: {
    gauge: {
        wrap: false
    }
}

Upvotes: 6

Related Questions