how to show specific tick value on highchart gauge?
up vote
0
down vote
favorite
I want to show the value between the green and yellow and red plotBands.
in the example attached i want to show the values 135,172 (where the color are changing)
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: 135,
color: '#55BF3B' // green
,
from: 135,
to: 172,
color: '#DDDF0D' // yellow
,
from: 172,
to: 200,
color: '#DF5353' // red
]
,
Working Example In JSFiddle
highcharts gauge
asked Nov 7 at 12:46
eyalb
1,55282956
add a comment |
up vote
0
down vote
favorite
I want to show the value between the green and yellow and red plotBands.
in the example attached i want to show the values 135,172 (where the color are changing)
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: 135,
color: '#55BF3B' // green
,
from: 135,
to: 172,
color: '#DDDF0D' // yellow
,
from: 172,
to: 200,
color: '#DF5353' // red
]
,
Working Example In JSFiddle
highcharts gauge
asked Nov 7 at 12:46
eyalb
1,55282956
1
Like this: jsfiddle.net/ewolden/08grxtqs/10?
– ewolden
Nov 7 at 13:10
@ewolden can i see the tick values and add the fix ones? 0,20,40,60,80,100,120,140,160,180,200(the calculate by the chart) and add my (135,172)
– eyalb
Nov 8 at 8:36
Like this: jsfiddle.net/ewolden/08grxtqs/21? This has ticks for every 20, and makes sure labels are not overlaping.
– ewolden
Nov 8 at 8:47
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I want to show the value between the green and yellow and red plotBands.
in the example attached i want to show the values 135,172 (where the color are changing)
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: 135,
color: '#55BF3B' // green
,
from: 135,
to: 172,
color: '#DDDF0D' // yellow
,
from: 172,
to: 200,
color: '#DF5353' // red
]
,
Working Example In JSFiddle
highcharts gauge
asked Nov 7 at 12:46
eyalb
1,55282956
I want to show the value between the green and yellow and red plotBands.
in the example attached i want to show the values 135,172 (where the color are changing)
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: 135,
color: '#55BF3B' // green
,
from: 135,
to: 172,
color: '#DDDF0D' // yellow
,
from: 172,
to: 200,
color: '#DF5353' // red
]
,
Working Example In JSFiddle
highcharts gauge
highcharts gauge
asked Nov 7 at 12:46
eyalb
1,55282956
asked Nov 7 at 12:46
eyalb
1,55282956
asked Nov 7 at 12:46
eyalb
1,55282956
asked Nov 7 at 12:46
eyalb
1,55282956
asked Nov 7 at 12:46
eyalb
1,55282956
1,55282956
1
Like this: jsfiddle.net/ewolden/08grxtqs/10?
– ewolden
Nov 7 at 13:10
@ewolden can i see the tick values and add the fix ones? 0,20,40,60,80,100,120,140,160,180,200(the calculate by the chart) and add my (135,172)
– eyalb
Nov 8 at 8:36
Like this: jsfiddle.net/ewolden/08grxtqs/21? This has ticks for every 20, and makes sure labels are not overlaping.
– ewolden
Nov 8 at 8:47
add a comment |
1
Like this: jsfiddle.net/ewolden/08grxtqs/10?
– ewolden
Nov 7 at 13:10
@ewolden can i see the tick values and add the fix ones? 0,20,40,60,80,100,120,140,160,180,200(the calculate by the chart) and add my (135,172)
– eyalb
Nov 8 at 8:36
Like this: jsfiddle.net/ewolden/08grxtqs/21? This has ticks for every 20, and makes sure labels are not overlaping.
– ewolden
Nov 8 at 8:47
1
1
Like this: jsfiddle.net/ewolden/08grxtqs/10?
– ewolden
Nov 7 at 13:10
Like this: jsfiddle.net/ewolden/08grxtqs/10?
– ewolden
Nov 7 at 13:10
@ewolden can i see the tick values and add the fix ones? 0,20,40,60,80,100,120,140,160,180,200(the calculate by the chart) and add my (135,172)
– eyalb
Nov 8 at 8:36
@ewolden can i see the tick values and add the fix ones? 0,20,40,60,80,100,120,140,160,180,200(the calculate by the chart) and add my (135,172)
– eyalb
Nov 8 at 8:36
Like this: jsfiddle.net/ewolden/08grxtqs/21? This has ticks for every 20, and makes sure labels are not overlaping.
– ewolden
Nov 8 at 8:47
Like this: jsfiddle.net/ewolden/08grxtqs/21? This has ticks for every 20, and makes sure labels are not overlaping.
– ewolden
Nov 8 at 8:47
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
You can use tickPositioner function to define which ticks will be shown on the chart:
tickPositioner: function()
var plotBands = this.options.plotBands,
ticks = ,
i = 0;
for (i; i <= 200; i += 20)
ticks.push(i);
for (i = 0; i < plotBands.length - 1; i++)
ticks.push(plotBands[i].to)
return ticks;
Live demo: https://jsfiddle.net/BlackLabel/1kpt7dws/
API: https://api.highcharts.com/highcharts/yAxis.tickPositioner
answered Nov 9 at 14:02
ppotaczek
2,978119
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You can use tickPositioner function to define which ticks will be shown on the chart:
tickPositioner: function()
var plotBands = this.options.plotBands,
ticks = ,
i = 0;
for (i; i <= 200; i += 20)
ticks.push(i);
for (i = 0; i < plotBands.length - 1; i++)
ticks.push(plotBands[i].to)
return ticks;
Live demo: https://jsfiddle.net/BlackLabel/1kpt7dws/
API: https://api.highcharts.com/highcharts/yAxis.tickPositioner
answered Nov 9 at 14:02
ppotaczek
2,978119
add a comment |
up vote
0
down vote
You can use tickPositioner function to define which ticks will be shown on the chart:
tickPositioner: function()
var plotBands = this.options.plotBands,
ticks = ,
i = 0;
for (i; i <= 200; i += 20)
ticks.push(i);
for (i = 0; i < plotBands.length - 1; i++)
ticks.push(plotBands[i].to)
return ticks;
Live demo: https://jsfiddle.net/BlackLabel/1kpt7dws/
API: https://api.highcharts.com/highcharts/yAxis.tickPositioner
answered Nov 9 at 14:02
ppotaczek
2,978119
add a comment |
up vote
0
down vote
up vote
0
down vote
You can use tickPositioner function to define which ticks will be shown on the chart:
tickPositioner: function()
var plotBands = this.options.plotBands,
ticks = ,
i = 0;
for (i; i <= 200; i += 20)
ticks.push(i);
for (i = 0; i < plotBands.length - 1; i++)
ticks.push(plotBands[i].to)
return ticks;
Live demo: https://jsfiddle.net/BlackLabel/1kpt7dws/
API: https://api.highcharts.com/highcharts/yAxis.tickPositioner
answered Nov 9 at 14:02
ppotaczek
2,978119
You can use tickPositioner function to define which ticks will be shown on the chart:
tickPositioner: function()
var plotBands = this.options.plotBands,
ticks = ,
i = 0;
for (i; i <= 200; i += 20)
ticks.push(i);
for (i = 0; i < plotBands.length - 1; i++)
ticks.push(plotBands[i].to)
return ticks;
Live demo: https://jsfiddle.net/BlackLabel/1kpt7dws/
API: https://api.highcharts.com/highcharts/yAxis.tickPositioner
answered Nov 9 at 14:02
ppotaczek
2,978119
answered Nov 9 at 14:02
ppotaczek
2,978119
answered Nov 9 at 14:02
ppotaczek
2,978119
answered Nov 9 at 14:02
ppotaczek
2,978119
2,978119
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53189731%2fhow-to-show-specific-tick-value-on-highchart-gauge%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
1
Like this: jsfiddle.net/ewolden/08grxtqs/10?
– ewolden
Nov 7 at 13:10
@ewolden can i see the tick values and add the fix ones? 0,20,40,60,80,100,120,140,160,180,200(the calculate by the chart) and add my (135,172)
– eyalb
Nov 8 at 8:36
Like this: jsfiddle.net/ewolden/08grxtqs/21? This has ticks for every 20, and makes sure labels are not overlaping.
– ewolden
Nov 8 at 8:47