I am trying to color Y axes on a Highstock chart, I tried changing the plotBackgroundColor but it changes the whole plot area.
2 images are more than 2 thousand words:
On the left I have my current result, it changes the whole plot area background color, so is not easy to see where a chart ends and the next one starts, On the right is the expected result, each axis is separated by the background color and a gray border.
This is my code:
var p0 = [
[1540166400000,122.85],
[1540170000000,122.33],
[1540173600000,120.96],
[1540177200000,120.77],
[1540180800000,120.84],
[1540184400000,120.61],
[1540188000000,120.83],
[1540191600000,121.04],
[1540195200000,120.67],
[1540198800000,121.05],
[1540202400000,122.29],
[1540206000000,122.45],
[1540209600000,123.13],
[1540213200000,123.74],
[1540216800000,124.07],
[1540224000000,123.28],
[1540227600000,122.59],
[1540231200000,122.98],
[1540234800000,123.51],
[1540238400000,123.38],
[1540242000000,123.45],
[1540245600000,123.15],
[1540249200000,123.72],
[1540252800000,123.65],
[1540256400000,123.65],
[1540260000000,123.28],
[1540263600000,122.56],
[1540267200000,122.41],
[1540270800000,122.23],
[1540274400000,122.22],
[1540278000000,122.4],
[1540281600000,121.57],
[1540285200000,121.69],
[1540288800000,121.98]];
var p1 = [
[1540166400000,127.27],
[1540170000000,126.74],
[1540173600000,125.46],
[1540177200000,125.49],
[1540180800000,125.71],
[1540184400000,125.49],
[1540188000000,125.57],
[1540191600000,126.02],
[1540195200000,125.62],
[1540198800000,125.88],
[1540202400000,126.49],
[1540206000000,127.11],
[1540209600000,127.97],
[1540213200000,128.84],
[1540216800000,128.66],
[1540224000000,127.63],
[1540227600000,126.98],
[1540231200000,127.63],
[1540234800000,127.77],
[1540238400000,127.21],
[1540242000000,127.24],
[1540245600000,126.87],
[1540249200000,126.99],
[1540252800000,127.04],
[1540256400000,127.47],
[1540260000000,126.91],
[1540263600000,126.3],
[1540267200000,126.36],
[1540270800000,126.07],
[1540274400000,126.09],
[1540278000000,126.18],
[1540281600000,125.54],
[1540285200000,125.7],
[1540288800000,126.06]];
chart = new Highcharts.StockChart({
chart: {
renderTo: "container",
backgroundColor:'#EBEBEB',
plotBackgroundColor:'#FFFFFF',
plotBorderColor: '#999999',
plotBorderWidth: 2
},
title: {
text: "Coloring axis",
},
legend: {
enabled: false
},
xAxis: {
ordinal: false
},
yAxis: [
{
minorTicks: 1,
height: "46%",
top: "4%"
},
{
minorTicks: 1,
height: "46%",
top: "54%"
}
],
series: [
{
name: "Val1 1",
data: p0,
yAxis: 0,
},
{
name: "Presión 2",
data: p1,
yAxis: 1,
},
]
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>
A workaround to achieve what you are after can be done by using a third yAxis, like this:
{
height: "4%",
top: "50%",
labels: {
enabled: false
},
min: 0,
max: 1,
minorGridLineWidth: 0,
gridLineWidth: 0,
plotBands: [{
color: '#EBEBEB',
borderColor:'#999999',
borderWidth: 2,
from: 0.05,
to: 0.95,
}
}
var p0 = [
[1540166400000,122.85],
[1540170000000,122.33],
[1540173600000,120.96],
[1540177200000,120.77],
[1540180800000,120.84],
[1540184400000,120.61],
[1540188000000,120.83],
[1540191600000,121.04],
[1540195200000,120.67],
[1540198800000,121.05],
[1540202400000,122.29],
[1540206000000,122.45],
[1540209600000,123.13],
[1540213200000,123.74],
[1540216800000,124.07],
[1540224000000,123.28],
[1540227600000,122.59],
[1540231200000,122.98],
[1540234800000,123.51],
[1540238400000,123.38],
[1540242000000,123.45],
[1540245600000,123.15],
[1540249200000,123.72],
[1540252800000,123.65],
[1540256400000,123.65],
[1540260000000,123.28],
[1540263600000,122.56],
[1540267200000,122.41],
[1540270800000,122.23],
[1540274400000,122.22],
[1540278000000,122.4],
[1540281600000,121.57],
[1540285200000,121.69],
[1540288800000,121.98]];
var p1 = [
[1540166400000,127.27],
[1540170000000,126.74],
[1540173600000,125.46],
[1540177200000,125.49],
[1540180800000,125.71],
[1540184400000,125.49],
[1540188000000,125.57],
[1540191600000,126.02],
[1540195200000,125.62],
[1540198800000,125.88],
[1540202400000,126.49],
[1540206000000,127.11],
[1540209600000,127.97],
[1540213200000,128.84],
[1540216800000,128.66],
[1540224000000,127.63],
[1540227600000,126.98],
[1540231200000,127.63],
[1540234800000,127.77],
[1540238400000,127.21],
[1540242000000,127.24],
[1540245600000,126.87],
[1540249200000,126.99],
[1540252800000,127.04],
[1540256400000,127.47],
[1540260000000,126.91],
[1540263600000,126.3],
[1540267200000,126.36],
[1540270800000,126.07],
[1540274400000,126.09],
[1540278000000,126.18],
[1540281600000,125.54],
[1540285200000,125.7],
[1540288800000,126.06]];
chart = new Highcharts.StockChart({
chart: {
renderTo: "container",
backgroundColor:'#EBEBEB',
plotBackgroundColor:'#FFFFFF',
plotBorderColor: '#999999',
plotBorderWidth: 2
},
title: {
text: "Coloring axis",
},
legend: {
enabled: false
},
xAxis: {
ordinal: false
},
yAxis: [
{
minorTicks: 1,
height: "46%",
top: "4%",
plotLines: [
]
},
{
minorTicks: 1,
height: "46%",
top: "54%",
plotLines: [
]
},
{
height: "4%",
top: "50%",
labels: {
enabled: false
},
min: 0,
max: 1,
minorGridLineWidth: 0,
gridLineWidth: 0,
plotBands: [{
color: '#EBEBEB',
borderColor:'#999999',
borderWidth: 2,
from: 0.05,
to: 0.95,
}]
}
],
series: [
{
name: "Val1 1",
data: p0,
yAxis: 0,
},
{
name: "Presión 2",
data: p1,
yAxis: 1,
},
]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>
JSFiddle example: https://jsfiddle.net/ewolden/q826ze9v/8/
The "correct" way to achieve what you are after would be to follow highcharts' syncronized chart example: https://www.highcharts.com/demo/synchronized-charts. This is more complicated, but allows you much more customization, and would probably prove easier to work with long term.
I finally did it using highcharts SVGRenderer, drawing white rectangles for each axis at z-index:-1 to draw it on the background.
I hope this helps someone!
var p0 = [
[1540166400000,122.85],
[1540170000000,122.33],
[1540173600000,120.96],
[1540177200000,120.77],
[1540180800000,120.84],
[1540184400000,120.61],
[1540188000000,120.83],
[1540191600000,121.04],
[1540195200000,120.67],
[1540198800000,121.05],
[1540202400000,122.29],
[1540206000000,122.45],
[1540209600000,123.13],
[1540213200000,123.74],
[1540216800000,124.07],
[1540224000000,123.28],
[1540227600000,122.59],
[1540231200000,122.98],
[1540234800000,123.51],
[1540238400000,123.38],
[1540242000000,123.45],
[1540245600000,123.15],
[1540249200000,123.72],
[1540252800000,123.65],
[1540256400000,123.65],
[1540260000000,123.28],
[1540263600000,122.56],
[1540267200000,122.41],
[1540270800000,122.23],
[1540274400000,122.22],
[1540278000000,122.4],
[1540281600000,121.57],
[1540285200000,121.69],
[1540288800000,121.98]];
var p1 = [
[1540166400000,127.27],
[1540170000000,126.74],
[1540173600000,125.46],
[1540177200000,125.49],
[1540180800000,125.71],
[1540184400000,125.49],
[1540188000000,125.57],
[1540191600000,126.02],
[1540195200000,125.62],
[1540198800000,125.88],
[1540202400000,126.49],
[1540206000000,127.11],
[1540209600000,127.97],
[1540213200000,128.84],
[1540216800000,128.66],
[1540224000000,127.63],
[1540227600000,126.98],
[1540231200000,127.63],
[1540234800000,127.77],
[1540238400000,127.21],
[1540242000000,127.24],
[1540245600000,126.87],
[1540249200000,126.99],
[1540252800000,127.04],
[1540256400000,127.47],
[1540260000000,126.91],
[1540263600000,126.3],
[1540267200000,126.36],
[1540270800000,126.07],
[1540274400000,126.09],
[1540278000000,126.18],
[1540281600000,125.54],
[1540285200000,125.7],
[1540288800000,126.06]];
chart = new Highcharts.StockChart({
chart: {
renderTo: "container",
backgroundColor:'#EBEBEB'
},
title: {
text: "Coloring axis",
},
legend: {
enabled: false
},
xAxis: {
ordinal: false
},
yAxis: [
{
minorTicks: 1,
height: "46%",
top: "4%"
},
{
minorTicks: 1,
height: "46%",
top: "54%"
}
],
series: [
{
name: "Val1 1",
data: p0,
yAxis: 0,
},
{
name: "Presión 2",
data: p1,
yAxis: 1,
},
]
}, function (chart) { // on complete
var yaxisColl = chart.yAxis;
for(f=0;f<yaxisColl.length;f++){
axis = yaxisColl[f];
chart.renderer.rect(10, axis.top, axis.width, axis.height, 0, 2)
.attr({
'stroke-width': 2,
stroke: '#999999',
fill: '#FFFFFF',
zIndex: -1
})
.add();
}
});
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 600px; height: 600px;"></div>
You could also do it using plotBands on each yAxis:
yAxis: [
{
minorTicks: 1,
height: "46%",
top: "4%",
plotBands: [{
from:-1000,
to:1000,
color:'rgb(255,255,255)'
}]
},
{
minorTicks: 1,
height: "46%",
top: "54%",
plotBands: [{
from:-1000,
to:1000,
color:'rgb(255,255,255)'
}]
}
]
Example: http://jsfiddle.net/jlbriggs/k2syL51r/
Related
I have two circle pie charts, they're looking good but I need to change the background color of the inner core:
$(document).ready(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
//backgroundColor: 'rgba(255, 255, 255, 0.0)',
//backgroundColor: 'rgba(255, 255, 255, 0.0)',
backgroundColor: '#FCFFC5',
margin: [0, 0, 0, 0],
spacingTop: 23,
spacingBottom: 23,
spacingLeft: 23,
spacingRight: 23,
plotBorderWidth: 1,
//polar: true,
//type: 'inline'
},
exporting: { enabled: false },
credits: {
enabled: false
},
plotOptions: {
size: '100%',
series: {
states: {
hover: {
enabled: false
}
}
},
pie: {
innerSize: 100,
backgroundColor: '#CCC',
depth: 15,
dataLabels: {
connectorWidth: 0
}
}
},
tooltip: {
enabled: false
//pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
title: {
text: '<div style="background-color:#2cb5e1;">Today WalkIn<br>67<br>Average wait time<br> 02:00</div>',
align: 'center',
verticalAlign: 'middle',
y: 5,
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '28px',
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle",
},
series: { states: { hover: { enabled: false } } },
series: [{
type: 'pie',
dataLabels: false,
shadow: false,
data: [{
name: '',
y: 7,
color: '#fc525a',
}, {
name: '',
y: 5,
color: '#2cb5e1',
}, {
name: '',
y: 18,
color: '#fc8b4d',
}],
innerSize: '65%'
},
{
type: 'pie',
data: [{
name: '',
y: 7,
color: '#fc525a',
}, {
name: '',
y: 5,
color: '#2cb5e1',
}, {
name: '',
y: 18,
color: '#fc8b4d',
}],
innerSize: '80%'
}]
});
});
yellow color background comes out of the two pie chart circles; instead, I wanted to display the color only where text has been placed
Screenshot
You need to draw a custom shape, for example:
chart: {
...,
events: {
load: function() {
var x = this.chartWidth / 2,
y = this.chartHeight / 2,
r = x > y ? y : x;
this.renderer
.circle(x, y, 0.65 * r)
.attr('fill', '#F0F')
.add()
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/apmvgnb4/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
I'm trying to recreate a linear gauge chart of fusionchart in highcharts. This is the example that I am trying to recreate.
Head:
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script type="text/javascript" src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
Body:
FusionCharts.ready(function () {
var cpuGauge = new FusionCharts({
type: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge',
width: '400',
height: '190',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"lowerLimit": "-1.9",
"upperLimit": "4.4",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"pointerBgColor": "#000000",
"baseFontColor": "#000000",
"decimalSeparator": ",",
"forceDecimals": "1",
"decimals": "1",
"valueFontBold": "0"
},
"colorRange": {
"color": [
{
"minValue": "-1.9",
"maxValue": "-0.1",
"label": "",
"code": "#e51b1b",
},
{
"minValue": "-0.1",
"maxValue": "1.0",
"label": "",
"code": "#fa7921",
},
{
"minValue": "1.0",
"maxValue": "1.5",
"label": "",
"code": "#fde74c",
},
{
"minValue": "1.5",
"maxValue": "4.4",
"label": "",
"code": "#9bc53d",
}
]
},
"pointers": {
"pointer": [
{
"value": "2"
}
]
},
}
})
.render();
});
The highcharts chart must take over the following properties:
Negative values
At least 4 groups (colors)
Pointer (indication marker) with number at top
In addition, I would really appreciate if there is an animation where you can see the pointer moving.
The bullet graph from highcharts comes closest to the fusionchart. I have made a first step (example) with this graph
Head:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/bullet.js"></script>
<div id="container1"></div>
Body:
Highcharts.setOptions({
chart: {
inverted: true,
marginLeft: 135,
type: 'bullet'
},
title: {
text: null
},
legend: {
enabled: false
},
yAxis: {
gridLineWidth: 0
},
plotOptions: {
series: {
pointPadding: 0.25,
borderWidth: 0,
color: '#000',
targetOptions: {
width: '200%'
}
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
}
});
Highcharts.chart('container1', {
chart: {
marginTop: 40
},
title: {
text: ''
},
xAxis: {
categories: "P"
},
yAxis: {
plotBands: [{
from: -1.9,
to: -0.1,
color: '#e51b1b'
}, {
from: -0.1,
to: 1,
color: '#fa7921'
}, {
from: 1,
to: 1.5,
color: '#fde74c'
}, {
from: 1.5,
to: 4.4,
color: '#9bc53d'
}],
labels: {
format: '{value}%'
},
title: null
},
series: [{
data: [{
y: 0,
target: 2
}]
}],
tooltip: {
pointFormat: '<b>{point.y}</b> (with target at {point.target})'
}
});
CSS:
#container1 {
max-width: 800px;
height: 115px;
margin: 1em auto;
}
But encounter a number of problems:
Negative numbers are not working
Pointer
Maximum is not shown (stops before 4.4)
With reference to this post. I have modified this chart with yAxis.tickPositioner and min, max property of yAxis
$(function () {
/**
* Highcharts Linear-Gauge series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
wrap = H.wrap,
each = H.each;
defaultPlotOptions.lineargauge = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.lineargauge = H.extendClass(columnType, {
type: 'lineargauge',
//inverted: true,
setVisible: function () {
columnType.prototype.setVisible.apply(this, arguments);
if (this.markLine) {
this.markLine[this.visible ? 'show' : 'hide']();
}
},
drawPoints: function () {
// Draw the Column like always
columnType.prototype.drawPoints.apply(this, arguments);
// Add a Marker
var series = this,
chart = this.chart,
inverted = chart.inverted,
xAxis = this.xAxis,
yAxis = this.yAxis,
point = this.points[0], // we know there is only 1 point
markLine = this.markLine,
ani = markLine ? 'animate' : 'attr';
// Hide column
point.graphic.hide();
if (!markLine) {
var path = inverted ? ['M', 0, 0, 'L', -5, -5, 'L', 5, -5, 'L', 0, 0, 'L', 0, 0 + xAxis.len] : ['M', 0, 0, 'L', -5, -5, 'L', -5, 5,'L', 0, 0, 'L', xAxis.len, 0];
markLine = this.markLine = chart.renderer.path(path)
.attr({
fill: series.color,
stroke: series.color,
'stroke-width': 1
}).add();
}
markLine[ani]({
translateX: inverted ? xAxis.left + yAxis.translate(point.y) : xAxis.left,
translateY: inverted ? xAxis.top : yAxis.top + yAxis.len - yAxis.translate(point.y)
});
}
});
})(Highcharts);
$('#container').highcharts({
chart: {
type: 'lineargauge',
inverted: true
},
title: {
text: 'A Horizontal Linear Gauge'
},
xAxis: {
lineColor: '#C0C0C0',
labels: {
enabled: false
},
tickLength: 0,
},
yAxis: {
min: -1.9,
max: 4.4,
tickPositions: [-1.9, -0.1,1,1.5 ,4.4],
tickLength: 1,
tickWidth: 1,
tickColor: '#C0C0C0',
gridLineColor: '#C0C0C0',
gridLineWidth: 1,
minorTickInterval: 5,
minorTickWidth: 1,
minorTickLength: 5,
minorGridLineWidth: 0,
startOnTick: true,
endOnTick: true,
title: null,
labels: {
format: '{value}%'
},
plotBands: [{
from:-1.9,
to: -0.1,
color: 'rgba(229, 27, 27, 1)'
}, {
from: -0.1,
to: 1.0,
color: 'rgba(250, 121, 33, 1)'
}, {
from: 1.0,
to: 1.5,
color: 'rgba(253, 231, 76, 1)'
},
{
from: 1.5,
to: 4.4,
color: 'rgba(155, 197, 61, 1)'
}]
},
legend: {
enabled: false
},
series: [{
data: [1.1],
color: '#000000',
dataLabels: {
enabled: true,
align: 'center',
format: '{point.y}%',
y: 10,
}
}]
}, // Add some life
function (chart) {
setInterval(function () {
Highcharts.each(chart.series, function (serie) {
var point = serie.points[0],
newVal,
inc = (Math.random() - 0.5) *10;
newVal = point.y + inc;
if (newVal < -1.9 || newVal > 4.4) {
newVal = point.y - inc;
}
point.update(Math.floor(newVal));
});
}, 2000);
});
});
Fiddle demo
Is it possible to create a progress chart in Highcharts like this:
https://0.s3.envato.com/files/84221450/screenshots/weblator_responsive_charts_7_bootstrap.jpg
I believe a bar chart can be customized to create this. But is it possible to change the styling so that no axes are showing and the bar labels are positioned above the bars rather than preceding them?
Possible to recreate but it is not so dynamic( in style ). So you have to adjust css according to data series in chart.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
marginBottom: 120
},
legend: {
enabled: false
},
colors: ['#173c64'],
xAxis: {
categories: ['option 1', 'option 2', 'option 3', 'option 4 ', 'option 5 '],
labels: {
align: 'left',
x: 5,
y: -20, /* to be adjusted according to number of bars*/
style: {
fontSize: "1rem",
color: '#000'
}
},
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
yAxis: {
lineWidth: 0,
gridLineWidth: 0,
lineColor: 'transparent',
labels: {
enabled: false
},
minorTickLength: 0,
tickLength: 0,
title: {
enabled: false
}
},
plotOptions: {
bar: {
stacking: "normal",
//groupPadding: 0, //add here
//pointPadding: 0, //add here,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
title: {
margin: 0,
useHTML: true,
text: "Test",
style: {
"color": "#333333",
"fontSize": "1.5rem",
"fontWeight": "bold"
}
},
series: [{
data: [{
y: 100,
color: '#99ddff'
}, {
y: 10,
color: '#ff8c1a'
}, {
y: 20,
color: '#ff471a'
}, {
y: 60,
color: '#c299ff'
}, {
y: 10,
color: '#99ddff'
}]
}]
})
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
I have a solid gauge that looks like this: https://jsfiddle.net/fb5Ltxbt/
These are the requirements I've achieved thus far:
Gauge range of 0 to 50
If value < 40, show in red, else in green
Display major ticks
This is what I want to add if it's possible:
Something to indicate Y-Axis stops as defined in the code
In other words, what I want is to ADD something like the "250" indicator from the following image:
It doesn't have to be an additional number, just something, anything, that marks each stop.
JSFiddle source code below:
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
// Add something to indicate each of these stops
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10, // Keep the labels for these ticks
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [30],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I have seen how to make specific labels outside gauge chart but it requires all normal ticks to be removed. I'd don't want them to be removed if possible but please say so if what I want is not possible too, thanks!
You can an additional yAxis to achieve additional ticks. The additional axis should be linked to the main axis. Then, it has the same scale as the main axis and you gain control over additional, independent ticks - you define specific ticks via tickPositions.
{
linkedTo: 0,
lineWidth: 0,
minorTickLength: 0,
tickPositions: [35],
tickLength: 75,
labels: {
x: 30,
y: -30,
style: {
fontSize: '25px'
}
}
}]
Live example and output
https://jsfiddle.net/ym2tvzy7/
If you want ticks with different color and styles, you can add more axes.
https://jsfiddle.net/ym2tvzy7/1/
If i understand your requirements correctly
May be this will help not exactly as your requirement anyway as an alternative
You can also try :-
plotBands: [{
from: 39.5,
to: 40.5,
color: '#55BF3B' // green
}]
var gaugeOptions = {
chart: {
type: 'solidgauge',
backgroundColor: null
},
title: null,
pane: {
center: ['35%', '75%'],
size: '100%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: 'white',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.8, 'red'],
[1.0, 'green']
],
lineWidth: 0,
tickInterval: 10,
minorTickInterval: 2.5,
title: null,
labels: {
y: -5,
style: {
'color': 'black',
'fontWeight': 'bold'
}
}
}
};
var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 50,
title: null,
plotBands: [{
from: 0,
to: 40,
color: '#55BF3B' // green
}]
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'ABC',
data: [31],
dataLabels: {
formatter: function() {
return this.point.y;
},
y: -20,
style: {
textShadow: false,
'color': 'black',
'fontSize': '2em'
},
borderWidth: 0
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div style="width: 1024px; height: 768px; margin: 0;">
<div id="chartContainer"></div>
</div>
I am using highcharts for the first time, and I am trying to figure out how to set the Y axis points static.
I have used min=0 and max=140 , and the points on y axis come up as 0,25,50,75,100,125 and 150. Wherein I want it as 0,20,40,60,80,100,140.
Can someone let me know how could I achieve this.
Below is the highchart optins :
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
yAxis:{
min: 0, max: 140,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
series: [{
name: 'Value',
data: YaxisValuesArray
}]
});
});
You can set the tickInterval (http://api.highcharts.com/highstock#yAxis.tickInterval) on the axis
http://jsfiddle.net/blaird/KdHME/
$(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Div1',
width: 600,
height: 400
},
credits: {
enabled: false
},
title: {
text: 'Productivity Report',
x: -20 //center
},
xAxis: {
lineColor: '#FF0000',
categories: [1, 2, 3]
},
yAxis: {
min: 0,
max: 140,
tickInterval: 20,
lineColor: '#FF0000',
lineWidth: 1,
title: {
text: 'Values'
},
plotLines: [{
value: 0,
width: 10,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Value',
data: [
[1, 10],
[2, 20],
[3, 30]
]
}]
});
});
To do this using HighChart in a StockChart mode, I just need to set the property tickPixelInterval.
yAxis: {
...
tickPixelInterval: 35
...
}