I'm trying to have multiple optically synchronized charts. There is no problem with single series chart. But If I mix column and area chart, it starts to behave strangely.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
height: 200,
},
xAxis: {
startOnTick: false,
minPadding:0,
ordinal: false,
crosshair: true,
endOnTick: false,
min:1532767826000,
max:1532789426000,
type: 'datetime',
},
series: [{
type: 'area',
name: 'Serie1',
data: [ [1532767826000, 0],[1532789426000, 0] ]
},
{
type: 'column',
name: 'Serie1',
data: [ [1532767826000, 0],[1532789426000, 0] ]
}]
});
Example http://jsfiddle.net/fpnayfuq/49/
I'm not able to force area chart to have same x-axis start point as the other single series charts.
If you force all series to have the same pointPlacement, it should work:
plotOptions: {
series: {
pointPlacement: 'on'
}
},
Working example: http://jsfiddle.net/ewolden/fpnayfuq/58/
Related
TYPE Highstock while Multiple series with empty data freezed on zooming the whitespace at the chart unable to close after chart zoomed.
Highcharts.stockChart('container', {
chart: {
zoomType: 'x',
},
tooltip: {
enabled: true,
split: false,
shared: true,
},
rangeSelector: {
enabled: false,
},
xAxis: {
type: 'datetime',
ordinal: false,
},
series: [{
name: 'Chart 1',
type: 'line',
color: 'red',
dataGrouping: {
approximation: 'high',
},
step: 'left',
data: data1,
}, {
name: 'Chart 2',
type: 'line',
color: 'blue',
dataGrouping: {
approximation: 'high',
},
step: 'left',
data: data2,
}]
});
chack while setting up The default minRange for the x axis is five times smallest interval between any of the data points.
How can I enable only the left most Highcharts XAxis plot line on DateTime Line chart. I suppose there should be a default option to display XAxis line without needing to know the minimum/start value
My progress so far -> https://jsfiddle.net/Lpjb9wc7/
const chart = Highcharts.chart('container', {
credits: {
enabled: false,
},
title: null,
xAxis: {
title: 'Session',
type: 'datetime',
tickInterval: 3600 * 1000,
gridLineWidth: 1
},
yAxis: {
gridLineWidth: 0,
title: {
text: 'Temperature',
},
},
legend: {
enabled: false,
},
plotOptions: {
series: {
marker: {
enabled: false,
},
},
},
series: [
{
data: [
[1369206795000, 1],
[1369225421000, 3],
[1369230934000, 2],
],
},
],
});
You need to change the dafault value of the lineWidth property.
yAxis: {
lineWidth: 1,
...
}
Live demo: https://jsfiddle.net/BlackLabel/49078gLx/
API Reference: https://api.highcharts.com/highcharts/yAxis.lineWidth
I am using highcharts to make a graph . My graph is look like below,
I want to merge the points using an Arc or Curve. So my excepted output look like below,
Also i am using PlotLines to draw a line in Yaxis. I want to mark the point in the PlotLine . I am using the following code to make this graph .
$(document).ready(function () {
var left = [[4,7],[9,2]];
var right = [[2,2],[9,9]];
Highcharts.chart('container', {
title:{
text:''
},
tooltip: { enabled: false },
exporting: { enabled: false },
credits: {enabled: false},
plotOptions: {
series: {
pointStart: 1
}
},
xAxis: {
max: 10,
min: 1,
tickInterval: 1
},
yAxis: {
max: 11,
min: 0,
tickInterval: 1,
plotLines: [{
color: 'black',
value: 5.5,
width: 2
}],
},
series: [{
showInLegend: false,
data: left
},
{
showInLegend: false,
data: right
},
],
});
});
I am looking for a basic example from Highcharts where the following is done
a. 3 separate graphs windows stacked on top of each other
b. combine zoom option where all three separate graphs can bee zoomed for data.
what I was looking is "highstock" data where i can add more windows.
thanks,
Bilal
You can refer this example
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
You may use any number of y-axis i.e stacked graphs
#Bial I have created a fiddle for your use-case, view the fiddle at https://jsfiddle.net/Nishith/4b33pvc2/ Its having 3 series with navigator.
code for each series is like below :
{
name : 'critical alarm',
data :data.criticalAlarmCountTimeseries,
id : 'critical',
zIndex : 1,
lineWidth:3,
color:'red',
yAxis: 0 ,
marker : {
enabled : false
}
}
You can catch afterSetExtremes on xAxis chart and call setExtremes on the other charts to "zoom".
events: {
afterSetExtremes: function() {
if (controllingChart == "chart3") {
var xMin = this.chart.xAxis[0].min;
var xMax = this.chart.xAxis[0].max;
chart1.xAxis[0].setExtremes(xMin,
xMax,
true);
chart2.xAxis[0].setExtremes(xMin,
xMax,
true);
}
}
}
Example: http://jsfiddle.net/Gv7Tg/33/
I'm using the HighStock version of HighCharts to create a series of data in charts. I've got a candlestick graph, on top of a bar graph, on top of a histogram. The candlestick points are clickable. I want to add a flag to the point on the candlestick chart that they just clicked on.
Here is some of the code I've tried playing with:
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'DJIA Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 300,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 400,
height: 100,
offset: 0,
lineWidth: 2
}, {
title: {
text: 'MACD'
},
top: 520,
height: 100,
offset: 0,
lineWidth: 1
}],
series: [{
type: 'candlestick',
name: 'DJIA',
data: ohlc,
events: {
click: function(event) {
console.log(chart);
chart.series[6].setData(event.point);
}
},
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Histogram',
pointPadding: 0,
groupPadding: 0,
data: histogram,
yAxis: 2,
color: '#666666'
}, {
type: 'line',
name: 'MACD',
pointPadding: 0,
groupPadding: 0,
data: macd,
yAxis: 2,
color: '#0000FF'
}, {
type: 'line',
name: 'Signal',
pointPadding: 0,
groupPadding: 0,
data: signal,
yAxis: 2,
color: '#000000'
}, {
type: 'flags',
name: 'Active Point',
data: [],
onSeries: ohlc,
shape: 'squarepin'
}]
});
})
The chart doesn't throw any JavaScript errors, but it's not creating the flag. At the very least, it's not showing it. I want to essentially have it draw the flag over the candlestick they clicked. If they click another spot, I want to remove the old flag and draw a new one on the new point. I figured this was best done by adding and removing data from the series but haven't had much luck.
Any help on this would be greatly appreciated!
Firstly, A js-fiddle example would be highly appreciate to understand your problem.
From the best that I understood about your problem, try this (Assuming 5 is the index of your flag series, your code seems to be using index 6?!)
click: function(event) {
this.chart.series[5].addPoint({
x: event.point.x,
title: 'hey you clicked me'
});
}
my fiddled code # http://jsfiddle.net/U2Z2x/1/
Since you seem to be interested in showing only 1 flag, as you were rightly using setData, that seems to be your best bet, just a catch, setData expects an array, and you passing a single value, also the format of the point needs to be slightly redone for flag type series
click: function(event) {
this.chart.series[5].setData([{
x: event.point.x,
title: 'hey you clicked me'
}]);
fiddle update # http://jsfiddle.net/U2Z2x/2/