I want to create a combination between a standard telemetry graph and a graph with non-telemetric values spread over a time axis.
I have a number of examples of graphs for example:
not telemetric data example
I thought to use either a bullet graph or in the x range.
But I was able to use these in a way that is synchronized with the normal graph.
ֿI am happy to hear ideas for a similar solution
To combine, such types of the series, you have to at lest create separate x axes. You can also create separate charts or panes.
Highcharts.chart('container', {
xAxis: [{
type: 'datetime'
}, {
type: 'linear'
}],
series: [{
type: 'xrange',
xAxis: 0,
data: [{
x: Date.UTC(2014, 10, 21),
x2: Date.UTC(2014, 11, 2),
y: 1,
}, {
x: Date.UTC(2014, 11, 2),
x2: Date.UTC(2014, 11, 5),
y: 1
}]
}, {
type: 'line',
data: [2, 2, 2, 2, 2, 2, 2],
xAxis: 1
}]
});
Live demo: http://jsfiddle.net/BlackLabel/j57q0z9n/
Related
I would like to emphasise the difference between 2 different series in the same graphic : one coming from the user data and one from static data as following :
I wanted to define the pointPadding value, but this is available for all the series. How can I set this value only for a specific serie ?
The simplest solution seems to be adding a second x-axis and separate series. For example:
series: [{
...,
groupPadding: 0.325,
id: 'id1'
}, {
...,
groupPadding: 0.325,
id: 'id2'
}, {
...,
xAxis: 1,
linkedTo: 'id1'
}, {
...,
xAxis: 1,
linkedTo: 'id2'
}],
xAxis: [{
width: '20%',
type: 'category',
tickWidth: 1
}, {
offset: 0,
width: '80%',
left: '20%',
type: 'category',
tickWidth: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/rwg6tL2v/
API Reference: https://api.highcharts.com/highcharts/xAxis
I am trying to show plotband on x axis but its getting displayed on all x axis data series. I want to render it for certain x axis values only. I
Thanks in advance.
You can achieve it by adding white plotBands on the yAxis (to cover the common part from the xAxis).
xAxis: {
min: Date.UTC(2014, 10, 17),
max: Date.UTC(2014, 10, 30),
plotBands: [{
from: Date.UTC(2014, 10, 18),
to: Date.UTC(2014, 10, 20)
}]
},
yAxis: {
plotBands: [{
from: 0.5,
to: 1.5,
color: 'white'
}]
},
Demo: https://jsfiddle.net/BlackLabel/nzk3mjg8/
I need to hide the last point in a serie but have to keep the label. Seems is only possible to set a pointWidth but not a pointHeight. How can i force to display the label and hide the column bar for the last point?
series: [
{
type: 'column',
data: [1, 2, 1, 2, 3, { pointWidth: 0, y: 5 }]
}
]
Here's a demo of the current/expected behavior
Thanks
You could set the color of the last column to transparent:
series: [{
data: [3,5,7,4,{y:5,color: 'transparent'}]
}]
Example:
http://jsfiddle.net/jlbriggs/7o2hafuy/
With dataLabels Api Doc that's possible
series: [{
type: 'column',
dataLabels:{
enabled:true
},
data: [1, 2, 1, 2, 3, {
pointWidth: 0,
y: 5
}]
}]
Fiddle
I have a simple HighStock chart with two series as shown in below image:
So functionality wise, HighChart decreases the width of the bar as soon as new series is added.
But I don't want to decrease the width of the bar, when there is data for only one series at specific point. (here date, 17. May)
Here is the Fiddle I have created. Try hiding one of the series and see width of the bar. The same width should be applied for the bar on "17. May" when both series are visible as there is data for only one series for that date. As shown below:
I have used below code:
Highcharts.stockChart('container', {
chart: {
alignTicks: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
"series":[
{
"name":"Key Rate 319",
"type":"column",
"data":[{x: 1147651200000, y: 1}, {x: 1147737600000, y: 7}, {x: 1147824000000, y: 5}, {x: 1147910400000, y: 4}],
"marker":{"enabled":false},
"shadow":false,
"color":"blue"
},
{
"name":"Key Rate 321",
"type":"column",
"data":[{x: 1147651200000, y: 4}, {x: 1147737600000, y: 2}, {x: 1147824000000, y: null}, {x: 1147910400000, y: 1}],
"color":"green"
}]
});
How can I achieve this ?
Series has two properties for controlling the range and placement of points: pointRange & pointPlacement. They work for all series' points and unfortunately can't be applied to individual columns.
Workaround
Disable grouping and reset pointPadding & groupPadding:
plotOptions: {
series: {
grouping: false,
pointPadding: 0,
groupPadding: 0
}
},
Create a separate series for every point and apply appropriate pointRange & pointPadding to them. Then link them using linkedTo property to mimic the original series structure:
series: [{
name: 'First series',
color: '#bada55',
data: [
[0, 2]
],
pointRange: 0.4,
pointPlacement: -0.5
}, {
data: [
[1, 7]
],
linkedTo: ':previous',
color: '#bada55',
pointRange: 0.4,
pointPlacement: -0.5
}, {
data: [
[2, 5]
],
linkedTo: ':previous',
color: '#bada55',
//pointRange: 1, // by default
//pointPlacement: 0 // by default
}, {
data: [
[3, 4]
],
linkedTo: ':previous',
color: '#bada55',
pointRange: 0.4,
pointPlacement: -0.5
}, {
name: 'Second series',
data: [
[0, 1]
],
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}, {
data: [
[1, 2]
],
linkedTo: ':previous',
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}, {
data: [
[3, 2]
],
linkedTo: ':previous',
color: '#c0ffee',
pointRange: 0.4,
pointPlacement: 0.5
}]
Live demo: http://jsfiddle.net/BlackLabel/q7j4m8eb/
Disadvantage of this approach are that you must define color for each point (series) explicitly and the data structure look a bit complex.
All options mentioned above can be found in the API: https://api.highcharts.com/highcharts/
I'm having a problem getting Highcharts Column Range charts with multiple data series to display as I would like. Please refer to http://jsfiddle.net/jbreadner/6qsvjark/1/
There are two charts shown here, the "Top Chart" and "Bottom Chart".
The top chart uses multiple data series effectively, as seen both in code and also with the "Task 1" and "Task 2" entries in the legend. The problem with this chart is that the Task 1 and Task 2 bars are offset from each other vertically.
series: [{
name: 'Task 1',
stack: 'Tasks',
data: [{
x: 0,
low: 7,
high: 8
}, {
x: 1,
low: 6.5,
high: 7.5
}]
}, {
name: 'Task 2',
stack: 'Tasks',
data: [{
x: 0,
low: 8,
high: 9
}, {
x: 1,
low: 7.5,
high: 8.5
}]
}]
The bottom chart displays the column range chart as I would like to see, but it forces a color for every data point, and in using one data series it breaks the legend functionality. This results in uglier code with reduced functionality.
series: [{
name: 'Data',
data: [{
x: 0,
low: 7,
high: 8
},{
x: 0,
low: 8,
high: 9,
color: "#202020"
},{
x: 1,
low: 6.5,
high: 7.5
},{
x: 1,
low: 7.5,
high: 8.5,
color: "#202020"
}]
}]
Is there any way to modify the top chart's configuration so it retains multiple data sets, but visually looks like the bottom chart?
Column charts have a "stack" property, but this doesn't appear to work with the chart range type. The "stack" option is included in the top chart.
just add :
plotOptions: {
columnrange: {
grouping: false
}
}
to your chart. http://jsfiddle.net/6qsvjark/2/