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
Related
I created highcharts heatmap with drilldown. Drilldown has link on xaxis lable. Could I have link only on yaxis? And remove link on xaxis. Since my drilldown chart is associate to y not x.
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
colorAxis: {
min: 0,
stops: [
[0, '#7EAB55'],
[0.5, '#FFFE55'],
[1, '#B02418']
],
},
series: [{
data: [{
x: 0,
y: 0,
value: 0,
drilldown: 'animals'
}, {
x: 0,
y: 1,
value: 1
}, {
x: 1,
y: 0,
value: 2,
drilldown: 'animals'
}, {
x: 1,
y: 1,
value: 1
}],
dataLabels: {
enabled: true,
color: '#000000'
}
}],
drilldown: {
series: [{
id: 'animals',
data: [
[0, 3, 1],
[1, 1, 4],
[2, 4, 3]
]
}]
}
});
This is example in fiddle. Thanks.
https://jsfiddle.net/lundi/jdc4mpk2/
From Sebastian's suggestion, this is the answer.
You can use the chart.inverted feature to achieve the wanted result: jsfiddle.net/BlackLabel/82qapmoe
see the picture and code below.
It seemed that if the high value point happened to in line, the line color would be filled in the surrounded area.
No any idea yet!
Thanks advance for any help.
plotOptions: {
series: {
animation: false,
color: '#07b062',
marker: {
fillColor: '#1e1e26',
lineColor: "#07b062"
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.Color('#07b062').setOpacity(0.5).get('rgba')],
[1, Highcharts.Color('#07b062').setOpacity(0.0).get('rgba')]
]
}
}
},
one more
As per the official response, it was an issue related to the Chrome.
Here's the workaround:
.highcharts-series path {
stroke-linecap: initial;
}
See more discussion:
https://github.com/highcharts/highcharts/issues/7662
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]],
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
}]