I am trying to use the Highcharts gauge. Is there a way to set the plotband to a linear gradient? If my gauge has a value from 0-100, I want the plot band to shift from red at 0 to yellow at 50 to green at 100.
I thought that I could just generate the indiviual plotband sections for each stop point, 1-100 but if there was a way to set a linear grandient that would be so much cleaner. Any one know a way?
Yes, it is possible. Try something like this:
yAxis: {
min: 0,
max: 100,
plotBands: [{
color: {
linearGradient: [300, 300, 0, 0],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(150, 200, 155)']
]
},
from: 0,
to: 100
}],
},
http://jsfiddle.net/fsQZ7/
By carefully chosing your colours, linearGradients and from/to, you should be able to combine several plotbands to do what you want.
read "LINEAR GRADIENTS" on
http://www.highcharts.com/docs/chart-design-and-style/colors
Example: from yellow to green to red:
plotBands: [{
from: 0,
to: 29,
color: '#DDDF0D' // yellow
},{
from: 29,
to: 40,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#55BF3B'], //green
[1, '#DDDF0D'] //yellow
]
}
}, {
from: 40,
to: 51,
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, '#55BF3B'], //green
[1, '#DF5353'] //red
]
}
}, {
from: 51,
to: 80,
color: '#DF5353' //red
}]
Related
I want to include heatmaps on each treamap area.
You can set color for individual treemap data point as a linear gradient. For example:
series: [{
type: "treemap",
data: [..., {
name: 'Rick',
value: 10,
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#ffc400'],
[0.3, '#00ff62'],
[1, '#00306e']
]
}
}]
}]
Live demo: https://jsfiddle.net/BlackLabel/0usv9npa/
API Reference: https://api.highcharts.com/highcharts/series.treemap.data.color
Docs: https://www.highcharts.com/docs/chart-design-and-style/colors
color: {
linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
stops: [
[0, 'red'],
[1, 'orange']
]
}
Current result:
Desired result:
Multiple gradients are not supported on a single SVG element, but you can add additional rect elements as layers with radial gradient fill.
chart: {
events: {
load: function() {
...;
this.renderer.rect(...)
.attr({
fill: { // BLUE
radialGradient: {
cx: 0.9,
cy: 1,
r: 0.9
},
stops: [
[0, '#0000ff'],
[1, 'rgba(0, 0, 255, 0.1)']
]
}
})
.add();
this.renderer.rect(...)
.attr({
fill: { // RED
radialGradient: {
cx: 1,
cy: 0,
r: 0.9
},
stops: [
[0, '#ff0000'],
[1, 'rgba(255, 0, 0, 0.1)']
]
}
})
.add();
}
}
},
series: [{
type: "treemap",
color: { // GREEN
radialGradient: {
cx: 0,
cy: 0.5,
r: 0.9
},
stops: [
[0, '#00ff00'],
[1, 'rgba(0, 255, 0, 0.1)']
]
},
...
}]
Result:
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4975/
I am creating a line chart on highchart. Is there a way to make the plotBands to have a gradient color?
plotBands: [{
from: 7,
to: 0,
color: 'rgba(255, 51, 51, 0.28)'
}]
Here you can check my code for your reference
http://jsfiddle.net/MyTestSampleAccount/0nqn5vzs/
You can use something like following:
yAxis: {
...,
plotBands: [{
color: {
linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
from: 0,
to: 7
}],
},
DEMO
I am trying to have some cells half empty like here:
http://jsfiddle.net/fuw65g95/3/
But When there is not a cell on top of one half coloured, it is shown only in one colour: http://jsfiddle.net/fuw65g95/6/
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ {
x: 0,
y: 0,
value: 90,
color: {
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, '#000000'],
[0.49999999, '#000000'],
[0.5, '#007340'],
[1, '#007340']
]
}
}],
And where there is one on top, it works fine http://jsfiddle.net/fuw65g95/7/
series: [{
name: 'Sales per employee',
borderWidth: 1,
data: [ { ... }, [0,1,2]],
Using highcharts, how can I have a negative colour as a gradient instead of a solid fill?
I tried with the following:
series: [{
name: 'John',
data: [5, -3, -4, 7, 2],
negativeColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, 'rgb(255,47,47)'],
[1, 'rgb(171,0,0)']
]
},
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, 'rgb(0,141,3)'],
[1, 'rgb(0,255,6)']
]
}
}]
Although, the above code only applies a gradient to the positive values, and a solid fill to the negative values.
How can I achieve this?
WORKING DEMO
Try to use hex colours and set correct stop points.
negativeColor: {
linearGradient: [0, 100, 0, 300],
stops: [
[0, '#000000'],
[1, '#ff0000']
]
},
http://jsfiddle.net/zr4Ze/1/