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.
Related
I am trying to re-create the same line chart that is seen below using the Highcharts library. I can't figure out how can I display the date on the x-axis the same way it is shown on the image, and also why my third data series is not getting displayed?
Here's my code:
https://jsfiddle.net/samwhite/271gxvuL/1/
xAxis: {
crosshair: true,
title: { text: 'Date' },
categories: ['Jan 04', 'Jan 11', 'Jan 18', 'Jan 25'],
tickmarkPlacement: 'on'
},
yAxis: {
tickInterval: 10,
min: 5,
max: 40,
title: {
text: '# of Shares (mm)'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
legend: {
title: { text: 'Option Series' },
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'GME Call',
color: "#00429d",
data: [18.40345395, 18.32595087, 19.15087983, 19.16410026, 18.55687485, 20.95533447, 20.4068335, 30.04684925, 33.73630533, 32.00319773, 20.66296168, 20.77395832, 23.55373851, 38.30826413, 29.98265297, 34.92300725, 32.19425239, 28.27697149, 31.92597248],
marker: { enabled: false },
label: { enabled: false }
}, {
name: 'GME Net',
color: "#009c56",
data: [3.981667259, 3.699835889, 5.707331914, 5.583661701, 4.031818851, 9.716787874, 8.218344693, 24.91298209, 29.72145703, 27.10696218, 15.76613521, 15.21344769, 18.31385242, 33.94138296, 24.14691476, 30.91437069, 30.15361859, 24.33123219, 29.52458396],
marker: { enabled: false },
label: { enabled: false }
}, {
name: 'GME Put',
color: "#f79646",
data: [-14.42178669, -14.62611498, -13.44354791, -13.58043856, -14.525056, -11.2385466, -12.18848881, -5.133867153, -4.014848306, -4.896235549, -4.896826466, -5.560510629, -5.239886084, -4.366881175, -5.835738209, -4.00863656, -2.040633802, -3.945739308, -2.401388521],
marker: { enabled: false },
label: { enabled: false }
}],
You need to change your data into the array of arrays, where nested array includes the x date format, something like:
[[ x date in miliseconds, y value]]
You can use the pointStart & pointInterval features:
https://api.highcharts.com/highcharts/series.line.pointStart
https://api.highcharts.com/highcharts/series.line.pointInterval
You can define wanted a array of categories that you want to display on the xAxis - just like is done in your example
I have been trying to change Highmaps chart to bubble by adding
type: 'mapbubble', as below but failed
Is there any way to do it ? I dont know where went wrong
series: [{
type: 'mapbubble',
data: data,
Appreciate if anyone can help me to do that base on the code below
Link to jsfiddle
mapChart = Highcharts.mapChart('mapchart', {
title: {
text: 'Population history by country'
},
subtitle: {
text: 'Source: The World Bank'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
// type: 'logarithmic',
endOnTick: false,
startOnTick: false,
min: 50000
},
tooltip: {
footerFormat: '<span style="font-size: 10px">(Click for details)</span>'
},
series: [{
data: data,
mapData: mapData,
joinBy: ['iso-a3', 'code3'],
name: 'Current population',
allowPointSelect: true,
cursor: 'pointer',
states: {
select: {
color: '#a4edba',
borderColor: 'black',
dashStyle: 'shortdot'
}
}
}]
});
Replace point.value with point.z
data.push({
name: countries[code3].name,
code3: code3,
z: value,
year: year
});
Set chart.map prop to mapData:
chart: {
map: mapData
},
Create a new series which will be a background layer for bubbles.
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
},
Set the main series type to mapbubble
{
data: data,
type: 'mapbubble',
...
live example: https://jsfiddle.net/xf4tkec1/
I have this highchart graph displayed on my website. How can I set an interval for my x-axis? e.g. I want the fist value to be displayed and then skip the second and display the third.
Can this be done? Or do you always just HAVE to display all the data you're passing to the axis in an array?
My code: (timestamp is a JS array that contains my time. I can get that time in epoch format. act and temps are arrays for data to be plotted along y-axis)
$(function () {
$('#tempactgraph').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature & Activity Monitoring '
},
subtitle: {
text: 'Source: Cowlar Sensors'
},
xAxis: [{
categories: timestamp,
crosshair: true
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Activity',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} xx',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Activities',
type: 'spline',
connectNulls: 1,
yAxis: 1,
data: act,
tooltip: {
valueSuffix: ' xx'
}
}, {
name: 'Temperature',
type: 'spline',
connectNulls: 1,
data: temps,
tooltip: {
valueSuffix: '°C'
}
}]
});
});
You need to Add a tickInterval:2 to your x-axis decleration like so
xAxis: [{
categories: timestamp,
crosshair: true,
tickInterval: 2
}],
Highcharts API Reference
I have a Highchart in my web application. In the browser it displays normally which is as follows:
But when I export the chart it flips the axis and I end up with the following image:
Following are the options I am using for my Highchart.
var options = ({
chart: {
renderTo: 'chartDiv'
},
credits: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
tickInterval: 7200 * 10000,
allowDecimals:false,
labels: {
format: '{value}',
rotation: 30,
align: 'left',
},
title: {
text: 'Date'
}
},
yAxis: [{
title: {
text: 'No. of rings'
},
min: 0
},
{ // Secondary yAxis
gridLineWidth: 0,
min: 0,
title: {
text: 'Accumulative Rings',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} Ring',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true,
}
],
tooltip: {
shared: true
},
legend: { backgroundColor: 'rgba(211,223,181,0.6)', layout: 'vertical', align: 'left', verticalAlign: 'top', floating: true, borderWidth: 0, x: 70 },
plotOptions: {
spline: {
marker: {
enabled: false
},
}
}
});
I have three series in my chart, the bar chart can have 0 values.
The data is coming from an ajax service, which I put in an array and then add to chart as follows:
chart.addSeries({
type: 'bar',
name: 'Rings per day ',
data: barData,
pointInterval: mainInterval
});
chart.addSeries({
type: 'spline',
name: 'Accumilative rings ',
data: spline1Data,
yAxis: 1,
});
chart.addSeries({
type: 'spline',
name: 'Planned Progress ',
data: spline2Data,
yAxis: 1,
color: "#FF0000"
});
What's wrong with my chart?
bar series is the key part. bar series forces chart to be rendered flipped. In your case use column. It displays differently on your browser because, most probably, you have an old version of Highcharts.
I'm stuck at MACD plotting in highchart.
I don't understand where I'm doing wrong. Please follow jsfiddle link and try to solve and plotting graph for MACD only.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime',
},
yAxis: [{ // Primary yAxis for volume
title: {
text: 'volume',
style: {
color: 'blue'
}
},
height: '60%',
},{ // Secondary yAxis for Return
height: '60%',
opposite: true
},{
labels: {
align: 'left',
x: -3
},
title: {
text: 'MACD'
},
top: '65%',
height: '35%',
opposite: true
}],
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [ { color: "blue",
data: [0.06694678963061322,0.22184874961635637,1,1.031408464251624,0.6989700043360187,1e-7,0.47712125471966244,1e-7,0.17609125905568124,0.6989700043360187,1e-7,1e-7,1e-7,0.47712125471966244,1e-7,0.47712125471966244,0.0791812460476248],
id: "left_bar",
name: "Sentiment",
type: "column",
},{
color: "#F09413",
data: [50,49.805,50.024142,51.9900907806,54.0333013483,56.1568100913,58.3637727279,60.5991052233,62.7140139956,65.2100317526,68.5422643752,72.0447740848,75.7262620405,80.3758545298,85.3109319979,89.457043293,3.9835696837],
id: "right_bar",
name: "Price",
type: "line",
yAxis: 1
},{
algorithm: "MACD",
linkedTo: "right_bar",
name: "MACD",
showInLegend: true,
type: "trendline",
yAxis: 1
}
]
});
});
Accoring to the code: https://rawgit.com/laff/technical-indicators/master/technical-indicators.src.js it looks like periods are hardcoded, so it is a reason why your macd is not calculated. You you no enough points.