I want to create background quadrants like shown here in the fiddle
http://jsfiddle.net/vo97dry6/
But unlike the fiddle above my max/min range is [0-1 ] so i am getting overlapping quadrants..
http://jsfiddle.net/25d6g398/
xAxis: {
min: 0,
max: 1,
tickInterval: 0.5,
tickLength: 0,
minorTickLength: 0,
gridLineWidth: 1,
showLastLabel: true,
showFirstLabel: false,
lineColor: '#ccc',
lineWidth: 1,
},
yAxis: {
min: 0,
max: 1,
tickInterval: 0.5,
tickLength: 3,
minorTickLength: 0,
lineColor: '#ccc',
lineWidth: 1,
},
series: [
{ // next four series are for color
type: 'area',
fillOpacity: 0.1,
data: [[0.5,1.1], [-0.1, 1.1]],
lineWidth: 0
},
{
type: 'area',
fillOpacity: 0.1,
data: [[0.5, 1.1], [1.1, 1.1]],
lineWidth: 0
},
{
type: 'area',
fillOpacity: 0.1,
data: [[-0.1, 0.5], [1.1, 0.5]],
lineWidth: 0
},
{
type: 'area',
fillOpacity: 0.1,
data: [[-0.1, 0.5], [1.1, 0.5]],
lineWidth: 0
}
]
How an i hack to create neat background quadrants
How can I add quadrant labels clicking on which should perform some function (for example do a drilldown on that quadrant)
How can i make my axis to center at 0.5,0.5 instead of 0,0
Thanks for your help
Just use 4 points instead of 2:
series: [{
type: 'area',
fillOpacity: 0.4,
data: [
[0.5, 0],
[1, 0],
[1, 0.5],
[0.5, 0.5]
],
lineWidth: 0
}, {
type: 'area',
fillOpacity: 0.4,
data: [
[0, 0],
[0.5, 0],
[0.5, 0.5],
[0, 0.5]
],
lineWidth: 0
}, {
type: 'area',
fillOpacity: 0.4,
data: [
[0, 0.5],
[0.5, 0.5],
[0.5, 1],
[0, 1]
],
lineWidth: 0
}, {
type: 'area',
fillOpacity: 0.4,
data: [
[0.5, 0.5],
[1, 0.5],
[1, 1],
[0.5, 1]
],
lineWidth: 0
}]
Demo:
http://jsfiddle.net/BlackLabel/0rv8641f/
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 fill color in between the 2 series.I tried setting the white color for the second series but the transparent first series color is visible.
yAxis: {
title: {
text: 'Billions'
},
},
tooltip: {
split: true,
},
plotOptions: {
area: {
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268],
color: '#A5E1D2',
lineColor: '#008484',
lineWidth: 2,
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766],
color: 'white',
lineColor: '#002E2E',
lineWidth: 2,
}
jsfiddle
You can use a linearGradient for the color of the first series and set the color to 'transparent' for the second series
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268],
color: {
linearGradient: { x1: 0.02, x2: 0.98, y1: 0, y2: 1 },
stops: [
[0, 'green'],
[0.8, 'transparent'],
]
},
lineColor: '#008484',
lineWidth: 2,
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766],
color: 'transparent',
lineColor: '#002E2E',
lineWidth: 2,
}]
Here is a working fiddle:
https://jsfiddle.net/3k5t0r4v/
Here you can read more about how linearGradient works and other methods to style your highcharts:
Colors in Highcharts
This post helped
This is the updated jsfiddle
https://jsfiddle.net/diasraphael88/hdg83Lpw/
{
color: '#A5E1D2',
data: [3, 3, 2, 3, 3, 6, 3]
},{
color: '#A5E1D2',
data: [0, 0, 0, 0, 0, 0, 0]
},{
id: 'transparent',
color: 'rgba(255,255,255,0)',
data: [27,25,16,13,9,17,11]
}]
}, function(chart){
chart.get('transparent').area.hide();
});
I need to set horizontal bubble stacking, i got four stacked columns and i need to place bubbles on top of each. I made vertical stacking, but horizontaly they stay on on each
My code: http://jsfiddle.net/Hideon/7bu2z0mk/1/
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
plotOptions: {
pointWidth: 1,
column: {
stacking: 'normal',
pointRange: 1000 * 60 * 60 * 24
},
bubble: {
stacking: 'normal',
}
},
series: [
{
type: 'bubble',
data: [{
x: Date.UTC(2010, 0, 1),
y: 29.9,
z: 5
},
],
stack: 0
},
{
type: 'bubble',
data: [{
x: Date.UTC(2010, 0, 1),
y: 29.9,
z: 5
},
],
stack: 0
},
{
type: 'bubble',
data: [{
x: Date.UTC(2010, 0, 1),
y: 29.9,
z: 5
},
],
stack: 1
},
{
type: 'bubble',
data: [{
x: Date.UTC(2010, 0, 1),
y: 29.9,
z: 5
},
],
stack: 1
},
{
type: 'column',
data: [{
x: Date.UTC(2010, 0, 1),
y: 29.9
},
],
stack: 0
}, {
type: 'column',
data: [{
x: Date.UTC(2010, 0, 1),
y: 29.9
},
],
stack: 0
}, {
type: 'column',
data: [{
x: Date.UTC(2010, 0, 1),
y: 29.9
},
],
stack: 1
}, {
type: 'column',
data: [{
x: Date.UTC(2010, 0, 1),
y: 29.9
},
],
stack: 1
}
]
});
Stacking for bubble series type is not supported, but you can implement it. Please take a look at the example below, you can calculate y value for all bubble points by using toValue method:
Highcharts.chart('container', {
chart: {
events: {
load: function() {
var bubble = this.series[0],
yAxis = this.yAxis[0],
base = yAxis.toPixels(0),
xVal = 0,
radius,
newY = 0;
Highcharts.each(bubble.points, function(p, i) {
if (p.x !== xVal) {
xVal = p.x;
newY = 0;
}
radius = p.marker.radius;
newY += yAxis.toValue(base - radius)
p.update({
y: newY
});
newY += yAxis.toValue(base - radius);
});
}
}
},
yAxis: {
min: 0,
max: 5
},
series: [{
type: 'bubble',
data: [
[0, 0, 10],
[0, 0, 20],
[0, 0, 15],
[0, 0, 12],
[0, 0, 20],
[0, 0, 15],
[1, 0, 11],
[1, 0, 12],
[1, 0, 13],
[1, 0, 14],
[1, 0, 16],
[1, 0, 15]
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/dmn63hce/
API: https://api.highcharts.com/class-reference/Highcharts.Axis#toValue
Since highcharts does not have a column chart where I can set height and width of each column, I have to use an area chart to accomplish this. So basically I am using area charts to draw rectangles. The problem with area charts is that the tooltip is not centered but is always shown above one edge of the rectangle. Plus, I am drawing multiple rectangles on top of each other causing to show the tooltip of the wrong rectangle.
$('#container').highcharts({
chart: {
type: 'area',
zoomType: 'x'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
enabled: false
}
},
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
fillOpacity: 1
}
},
tooltip: {
enabled: true
},
series: [{
name: 'Year',
color: '#0d233a',
data: [
[Date.UTC(2017, 0, 1), 0],
[Date.UTC(2017, 0, 1), 4],
[Date.UTC(2017, 11, 31), 4],
[Date.UTC(2017, 11, 31), 0]
],
zIndex: 4,
fillColor: '#0d233a',
lineColor: '#fff'
}, {
name: 'Half year',
id: 'Half',
color: '#2f7ed8',
data: [
[Date.UTC(2017, 0, 1), 0],
[Date.UTC(2017, 0, 1), 10],
[Date.UTC(2017, 5, 31), 10],
[Date.UTC(2017, 5, 31), 0]
],
zIndex: 3,
fillColor: '#2f7ed8',
lineColor: '#fff'
}, {
name: 'Half year',
linkedTo: 'Half',
data: [
[Date.UTC(2017, 6, 1), 0],
[Date.UTC(2017, 6, 1), 6],
[Date.UTC(2017, 11, 31), 6],
[Date.UTC(2017, 11, 31), 0]
],
zIndex: 3,
fillColor: '#2f7ed8',
lineColor: '#fff'
}]
});
For an example see this fiddle.
You can see that the tooltip is not centered and that a wrong tooltip is shown when hovering the dark blue rectangle. Does anyone know how to fix this?
If all the columns within one series are the same width, you can try to do this with a normal column chart, using tightly packed columns and multiple xAxis:
...
xAxis: [{
type: 'datetime',
}, {
type: 'datetime',
}],
plotOptions: {
column: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
pointPlacement: 'between',
},
},
series: [{
name: 'Year',
data: [
[Date.UTC(2016, 0, 1), 3],
[Date.UTC(2017, 0, 1), 4],
],
zIndex: 4,
color: '#222'
}, {
name: 'Half year',
xAxis: 1,
data: [
[Date.UTC(2016, 0, 1), 8],
[Date.UTC(2016, 6, 1), 11],
[Date.UTC(2017, 0, 1), 10],
[Date.UTC(2017, 6, 1), 6],
],
zIndex: 3,
color: 'royalblue',
}],
http://jsfiddle.net/j1fnkt01/3/
Note: Zooming won't work properly until the x-axes can be properly linked (linkedTo), and this issue prevents us from doing that right now.
You can use tooltip.followPointer to get desired result
Whether the tooltip should follow the mouse as it moves across columns, pie slices and other point types with an extent. By default it behaves this way for scatter, bubble and pie series by override in the plotOptions for those series types.
For touch moves to behave the same way, followTouchMove must be true also.
Defaults to false.
Tooltip will be
tooltip: {
enabled: true,
followPointer: true
},
Fiddle demo
Update
Use plotOptions.area.trackByArea to show tooltip properly
So plotOptions will be
plotOptions: {
area: {
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
fillOpacity: 1
},
series: {
trackByArea: true,
stickyTracking: false,
}
},
updated fiddle
I have a need with HighCharts graphs to display a line chart with 3 series and triangle markers on the same line. I have this a JSFiddle that seems to be working ok, but if the points are too close together a whole series becomes invisible.
$(function () {
$('#container').highcharts({
title: {
text: null
},
chart: {
type: 'line',
plotBackgroundImage: null,
backgroundColor: 'transparent',
width: 350,
height: 520,
borderWidth: 0,
marginTop: 0,
marginBottom: 50,
marginLeft: 140,
},
legend: {
align: 'left',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 20
},
xAxis: {
type: 'datetime',
lineWidth: 2,
lineColor: "#FF0000",
label: {
enabled: true,
format: "{value}"
}
},
yAxis: {
labels: {
enabled: false
},
gridLineColor: '#197F07',
title: {
text: null
}
},
plotOptions: {
series: {
marker: {
radius: 8,
symbol: "triangle"
}
},
line: {
lineWidth: 0
}
},
series: [{
data: [
[Date.UTC(2010, 0, 1), 0],
[Date.UTC(2010, 5, 1), 0],
[Date.UTC(2010, 11, 1), 0]
],
color: "#FF0000",
name: 'Group 1',
}, {
data: [
[Date.UTC(2010, 2, 1), 0],
[Date.UTC(2010, 3, 1), 0],
[Date.UTC(2010, 8, 1), 0]
],
color: "#00FF00",
name: 'Group 2'
}, {
data: [
[Date.UTC(2010, 1, 1), 0],
[Date.UTC(2010, 6, 1), 0],
[Date.UTC(2010, 9, 1), 0],
[Date.UTC(2011, 5, 1), 0]
],
color: "#0000FF",
name: 'Group 3'
}]
});
});
In this case, on the jsfiddle, the green triangles are invisible unless you hover over them. If the chart width is set to 550, the green triangles become visible.
I'd like to find a way to make these visible at all times. Thanks!
I'm not sure why this problem occurs originally, but it seems to be solved by explicitly stating enabled: true for plotOptions.series.marker. Like this:
plotOptions: {
series: {
marker: {
enabled: true, // Added
radius: 8,
symbol: "triangle"
}
},
line: {
lineWidth: 0
}
}
See this updated JSFiddle demonstration.