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]],
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
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
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 have been trying this for hours and still have no idea.
Here is the config that I am using
chart: {
type: 'xrange',
height: 800,
},
title: {
text: 'Patient Sessions Overview'
},
xAxis: {
title: 'Time of the Day',
type: 'datetime',
tickInterval: 3600*1000,
tickPixelInterval: 200,
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M', this.value);
},
},
min: Date.UTC(2016,1,1),
max: Date.UTC(2016,1,2),
},
yAxis: {
title: 'Day of the Month',
type: 'datetime',
tickInterval: 3600*1000*24,
//tickPixelInterval: 100,
min: Date.UTC(2016,1),
max: Date.UTC(2016,2) - 3600*1000*24
//min: 0,
//max: 31
},
plotOptions:{
series: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
name: 'Sessions',
//pointStart: Date.UTC(2000,0,1),
//pointInterval: 3600*1000,
//pointPadding: 10,
// groupPadding: 0,
borderRadius: 5,
pointWidth: 20,
data: [{
x: Date.UTC(2016, 1, 1, 0),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,4)
}, {
x: Date.UTC(2016, 1, 1, 12),
x2: Date.UTC(2016, 1, 1, 15),
y: Date.UTC(2016,1,5)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,14)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 9),
y: Date.UTC(2016,1,20)
}, {
x: Date.UTC(2016, 1, 1, 8),
x2: Date.UTC(2016, 1, 1, 23),
y:Date.UTC(2016,1,25)
},],
}]
Here is the jsfiddle link
I need to remove the chart to make full use of the plot area without leaving a huge white space on both ends.
It is problem with unsorted data. In fact, you can not sort your data as Highcharts would expect, because some of the points are starting before previous one are ended. However, for such case, series.pointRange = 1 resolves all issues, take a look: http://jsfiddle.net/umndydLL/1/
Use following in your chart config:
spacingBottom: 0,
spacingTop: 0,
spacingLeft: 0,
spacingRight: 0,
margin:0,
padding:0
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
}]