Related
I want to create a chart that will have a gradient of the colour of the tick under it as a region. It will change as it lands on a different data value with a different colour on the tick. The gradient will be from the tick colour to white.
Here is how it should look:
I managed to create different zone colors using "highcharts zones" and to set up a filling gradient using " highcharts fillColor". Now I can't understand how to generate a different filling color for each area.
This is my graph right now:
And this is part of my code linked to the problem:
this.chartOptions = {
...
plotOptions: {
area: {
pointStart: chartStart,
fillColor: {
linearGradient: {x1: 0, x2: 0, y1: 0, y2: 1},
stops: [
[0, 'red'],
[1, 'white']
]
}
}
},
series: [
{
type: 'area',
data: this.avgVoltageSeries,
pointInterval: ticksTime,
pointStart: chartStart,
zones: [{
value: this.fenceNodeConfiguration.criticalVoltage / 1000,
color: 'red'
}, {
value: this.fenceNodeConfiguration.warningVoltage / 1000,
color: 'orange'
}, {
color: '#009900'
}],
}]
};
Do you know if there is a way to change the filling color based on the area color?
You set the wrong zone, you have to set the zones with xAxis, not yAxis.
series: [
{
type: 'area',
data: this.avgVoltageSeries,
pointInterval: ticksTime,
pointStart: chartStart,
zones: [{
value: (new Date(new Date().setHours(10,0,0,0))).getTime(), // you should change the time here
color: 'red'
}, {
value: (new Date(new Date().setHours(12,0,0,0))).getTime(),// you should change the time here
color: 'orange'
}, {
color: '#009900'
}],
}]
I have set both a column and a line in one chart, such as the link:
https://jsfiddle.net/dodouwang/wtjbgav0/1/
Highcharts.chart('container', {
xAxis: {
type: 'datetime',
},
plotOptions: {
column: {
turboThreshold: 10000,
borderWidth: 0,
pointPadding: 0,
groupPadding: 0
},
},
series: [{
type: 'column',
name: 'column',
data: [[1497484800000,210000],[1497571200000,120000],[1497744000000,190000]]
},{
type: 'line',
name: 'line_wide',
data: [[1497484800000,210000],[1497571200000,120000]]
},{
type: 'line',
name: 'line_narrow',
data: [[1497484800000,210000],[1497498000000,120000]],
visible: false
}],
});
But I found that if the gap between the points of the line is too narrow(less than one day), then the width of the column is automatic set to no wider than the gap. Is it a bug or a feature?
you can visit the link above, the default show is a column with a "wider" line, it seems all right. But if you unselect the "line_wide" and select the "line_narrow", then the bug accurs.
How to fix it?
P.S.: I have another question of this link's column: I have set the xAxis to 'datetime', and the column data is [[1497484800000,210000],[1497571200000,120000],[1497744000000,190000], and set the Gapping to 0 to make the width of the column as wider as possible. But, when there are only column in the chart(the 2 lines are unselected), why the max width of the column is a "day", not an "hour" or a "minute" or other width?
What you need is series.pointRange option. Width of the column depends on that value and if it is not configured - the range will be computed as the distance between the two closest data points (on axis, so each series which have that specific axis will be taken into the account).
If you set pointRange to 1 day, columns widths will span for 1 day:
plotOptions: {
column: {
turboThreshold: 10000,
borderWidth: 0,
pointRange: 1000 * 3600 * 24,
pointPadding: 0,
groupPadding: 0
},
},
example: https://jsfiddle.net/nogfr6js/
The navigator in Highstock only seems to affect the first xAxis. The second xAxis, as in the example linked to below, isn't rescaled, and always shows all data.
See jsfiddle below:
https://jsfiddle.net/wardrop/t9ug4pm7/7/
Does anyone know how to fix this?
You can set extremes in the second axis manually after extremes are set in the first axis.
xAxis: [{
type: 'datetime',
minRange: 24 * 3600000, // 1 day
labels: {
align: "left",
rotation: 45
},
dateTimeLabelFormats: {
day: '%e %b %Y'
},
events: {
afterSetExtremes: function (e) {
this.chart.xAxis[1].setExtremes(e.min, e.max, true, false);
}
}
},
example: https://jsfiddle.net/t9ug4pm7/9/
You can also linked two axis, so the linked axis' extremes will follow after the master axis. But for columns it is needed to define pointRange because without it, columns might be drawn incorrectly.
, { //axis
type: 'datetime',
linkedTo: 0, // linked to master axis
minRange: 24 * 3600000,
lineWidth: 0,
tickWidth: 0,
labels: {enabled: false},
opposite: true
}
series: [{
id: 'daily',
name: 'Daily',
type: 'column',
color: 'rgb(124, 181, 236)',
data: data['daily'],
pointRange: 1000 * 3600 * 24,
},
example: https://jsfiddle.net/t9ug4pm7/11/
I have 2 graphs in 1 chart. The range of x-axis values for 1st graph is from 1 to 100. The range of x-axis values for 2nd graph is from 1 to 30. So, when the graphs are plotted in the chart, the 2nd graph gets plotted in very small area. So, it becomes difficult to read 2nd graph. My requirement - both the charts to be readable. Can anyone help me in doing this? Thanks in advance.
You could set up two axes - one for each series.
Example: http://jsfiddle.net/4v0a07op/
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: [{
},{
opposite: true
}],
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
name: '1 to 30',
xAxis: 1,
data: [11,12,13,14,15,16,17,18,19,10,11,12,13,14,15,16,17,18,19,10,11,12,13,14,15,16,17,18,19,10]
}, {
name: '1 to 100',
xAxis: 0,
data: [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0]
}]
});
});
This is a follow-up from Highcharts: incorrect column placement with linked series? but I felt that this issue warranted a new post rather than a continuation of the comments in the above post.
Basically a bit of a hack is required in order to implement variable width columns. That hack is to use multiple series... one series per column width required.
But that hack leads to an issue with placement of columns, and another hack is required to move them to the right place.
But that creates an issue with a big gap between the edge of the chart area and the y axis. So another hack is required to eliminate the gap.
But that seems to create yet another issue, which is that it messes up the left-most data points in any other series on the chart.
This is illustrated in the following jsfiddle:
http://jsfiddle.net/drmrbrewer/215tnLna/33/
You'll see that something funny is happening when the cursor is over the left-most two columns. If you un-share the tooltip, the problem appears to be that the tooltip is not operating at all on the left-most two spline points.
Any way to resolve this? It's a shame you can't just have variable column widths as a native feature, specifying a column width per point...
Thanks.
jsfiddle code is as follows:
$(function () {
$('#container').highcharts({
title: {
text: 'Variable width columns'
},
xAxis: {
type: 'datetime',
tickInterval: 36e5,
labels: {
format: '{value:%H}'
},
// following are to eliminate gaps:
min: 1428048000000-36e5 + (6 * 0.5 * 36e5),
max: 1428127200000-36e5 - (6 * 0.5 * 36e5)
},
// seems to be a combination of min above
// and tooltip.shared below that freezes the
// left-most two columns
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
column: {
groupPadding: 0,
pointPadding: 0,
borderWidth: 0,
grouping: false,
color: '#22CC00'
}
},
series: [{
name: 'spline',
yAxis: 0,
type: 'spline',
zIndex: 5,
data: [{"x":1428048000000,"y":8.6},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5},{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4},{"x":1428127200000,"y":6.9}],
color: '#2222CC'
},
// now the multiple series of columns having different widths, linked together...
{
name: 'column',
type: 'column',
data: [{"x":1428048000000,"y":8.6},{"x":1428051600000,"y":9},{"x":1428055200000,"y":8.1},{"x":1428058800000,"y":6.6},{"x":1428062400000,"y":5}],
pointRange: 36e5,
// following is to position the bars correctly
pointPlacement: -0.5*(3/6)*(1/3)
},{
name: 'column',
type: 'column',
data: [{"x":1428073200000,"y":4.9},{"x":1428084000000,"y":4},{"x":1428094800000,"y":3.4},{"x":1428105600000,"y":2.4}],
linkedTo: ':previous',
pointRange: 3 * 36e5,
// following is to position the bars correctly
pointPlacement: -0.5*(3/6)
},{
name: 'column',
type: 'column',
data: [{"x":1428127200000,"y":6.9}],
linkedTo: ':previous',
pointRange: 6 * 36e5,
// following is to position the bars as I want them
pointPlacement: -0.5
}]
});
});