CODEWITHSUNDEEP
javascriptjquerycsshighcharts
Archer
Archer

Reputation: 1162

Highcharts - Guage - Changing the color and radius of the center black dot(circle)

http://jsfiddle.net/fwxbfu1u/2/

This is the jsfiddle for the highcharts guage graph. i have tried to change all the options and customise the chart. But not able to figure out the way to change the radius and color of the center dot.

shown in this image below

In this example .. how do i change the color and radius of the centre black dot.?

enter image description here

Upvotes: 1

Views: 1950

Answers (3)

coDe murDerer
coDe murDerer

Reputation: 1876

you can use plotOptions, see the link below

plotOptions: {
            gauge: {
                pivot: {
                    radius: 10,
                    borderWidth: 1,
                    borderColor: 'gray',
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                        stops: [
                            [0, 'white'],
                            [1, 'gray']
                        ]
                    }
                }
            }
        },

http://jsfiddle.net/fwxbfu1u/8/

Upvotes: 4

Bandon
Bandon

Reputation: 809

$("#container").find("circle").attr("r", 15);
$("#container").find("circle").attr("fill", "red");

Just manualy find object and set attribute of it.

You can also set fill property by css like

circle{fill: rgb(255, 0, 0);}

But you cannot set radius by css, so I use both js ways.

http://jsfiddle.net/fwxbfu1u/6/

Upvotes: 1

Creed
Creed

Reputation: 103

Assuming the id of the div that contains gauge is "container"

var circle = $( "#container").find('circle');
$(circle).attr("r", 7 );
$(circle).attr("fill", 'green' );

Upvotes: 1

Related Questions