CODEWITHSUNDEEP
highcharts
km6zla
km6zla

Reputation: 4887

Highcharts multiple axis gauge with 2 dials with different radii

In Highcharts you can add a second axis and a second dial to a gauge and you can change the radius of the dials together but I cannot find a way to change the radius of each dial separately.

I want my plotOptions to look something like this:

plotOptions: {
    gauge: {
        dial: [
            {
                radius: "45%",
                rearLength: "0%"
            },
            {
                radius: "90%",
                rearLength: "-70%"
            }
        ]
    }
}

where only this seems to have any effect but it effect both dials

plotOptions: {
    gauge: {
        dial: {
            radius: "45%",
            rearLength: "0%"
        }
    }
}

i tried making plotOptions itself an array and then gauge. The API docs don't seem to offer a way to do this as all options beneath plotOptions seem to be singular.

Upvotes: 1

Views: 2761

Answers (1)

Jack.R.Abbit
Jack.R.Abbit

Reputation: 1871

Move the dial options into the actual series options: http://jsfiddle.net/9rZLH/

series: [{
    data: [80],
    dial: {
        radius: "45%",
        rearLength: "0%"
    }
},{
    data: [70],
    dial: {
        radius: "90%",
        rearLength: "-70%"
    }
}]

Edit: the Highcharts Clock example also does it this way.

Upvotes: 2

Related Questions