Using the Candlestick highstock chart,(http://www.highcharts.com/stock/demo/candlestick), I want to have the best last bar a custom candlestick where its available values are High and Low only? This is typical for a forecasting scenario where we would like to predict tomorrow's candlestick would likely to have a certain High (of the day) and Low (of the day). We are not so much concerned about its possible future open or close values. In the end, this (last) candlestick on the chart should look like a Line and not a bar.
Any idea much appreciated?
Use column/columnrange series, with pointWidth: 1. Setting example:
data: [{
low: 10, // low
y: 12, // high
x: date
}]
Another solution is to use scatter series with lineWidth: 1, for example:
data: [{
y: 10, // low
x: date
},{
y: 12, // high
x: date
}]
Related
I need to show multiple axis, which is having constant values in the x-axis and dynamic values in y-axises
1st y-axis regarding bubble chart enter image description here
2nd y-axis regarding column chart
We got requriment like to show them side by side not like merged as shown in second refrenece picture.
enter image description here
Implemented bubble and column chart in one chart using 2 y-axis and 1 x-axis. We got chart as show in reference.
enter image description here
Both are getting mergged instead we want to show them side by side.
You need to create column and bubble series with, each with own y-axis. Use pointPlacement property to position columns next to bubbles.
series: [{
type: 'column',
pointPadding: 0.4,
pointPlacement: 0.3,
data: [70, 50, 65],
yAxis: 1
}, {
type: 'bubble',
data: [3, 2, 3]
}]
Live demo: http://jsfiddle.net/BlackLabel/pwq3shef/
API Reference:
https://api.highcharts.com/highcharts/series.column.pointPlacement
https://api.highcharts.com/highcharts/series.column.pointPadding
i have two series to display (one is a candlestick and the other is a simple line) and i want the chart scale only based on the candlestick series.
On the Tradingview website this option is:
Scale Series Only
This option is for when there are studies or indicators overlaid onto the main chart window. When this option is active, the axis will scale according to the data series (price) alone. The values and coordinates of any active indicators will not be factored into the scaling of the axis.
My code is:
Highcharts.stockChart('chart-container', {
series: [
{
type: 'candlestick',
data: data.ohlc,
},
{
data: data.otherLine,
},
]
...
Is it possible to do this with highchart?
Highstock doesn't offer a property that'll do it automatically.
It can be done manually: find the lowest & the highest y value in your data and assign them to yAxis.min & yAxis.max options:
yAxis: {
min: 380,
max: 600
},
Live demo: http://jsfiddle.net/BlackLabel/puzxykva/
API: https://api.highcharts.com/highstock/
I have a Highcharts instance [1] with 4 series. Two of the series are index/ratio series and two are raw value series. What I would like to do is display the raw value series points on one of the index series without converting the raw value series to 'flags'. The reason for this is that I want all my point values to be in one tooltip.
With respect to the attached jsfiddle I would like the center buy and sell points to appear on the 'Price Change' series and for the current tooltip behavior in the example to be unchanged. I want one tooltip with four values and for the buy/sell values to be their raw values instead of the 'y' value of where they are displayed.
Is that something that is doable with Highcharts/Highstock?
[1]: http://jsfiddle.net/eZL8e/
Dave
You can easily manipulate what you want to display in tooltip using pointFormat for each series. Then you can change fromat for point from [timestamp, value] to {x: timestamp, y: value, myProperty: exValue}. Simple example: http://jsfiddle.net/eZL8e/5/
For buys:
tooltip: {
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.raw}</b><br/>'
},
data: [
{x: 1374555600000, raw: 21.13, y: 75},
{x: 1374642000000, raw: 20.5753, y: 85},
{x: 1374728400000, raw: 20.9367, y: 63}
]
Note: There is only one limitation for that solution, you need to disable dataGrouping, since grouped point's doesn't have custom properties like raw.
How to display the plotted value correctly to the exact milliseconds on the chart? How place a point or tooltip to exact milliseconds?
xAxis: {
type: 'datetime',
plotLines: [{
color: '#FF0000',
width: 2,
value: 1366113390066
}]
}
JSFiddle Link
Your series is not showing because your data array is not in a usable format.
this:
data: [{
'value': 731,
'timestamp': 1366032438641
}
should be either
this:
data: [{
'x': 1366032438641,
'y': 731
}
or, more simply, this:
data: [[1366032438641,731]]
reference: http://api.highcharts.com/highcharts#series.data
You'll have to clarify what you mean about the other part of your question.
EDIT:{
If you want actual millisecond precision, you will have to have enough width in your chart to specify a pixel per millisecond. This is not going to happen in any real chart obviously.
There's no way to draw a 2 pixel wide line in a ~600 pixel wide chart displaying 20+ hours and have it be precise to a millisecond.
That's about 72 million milliseconds in 600 pixels, which works out to 0.0000083 pixels per millisecond... (or 120,000 milliseconds per pixel)
:)
I have a time series chart in Highcharts where I would like users to be able to zoom in on specific date ranges. This is possible by setting zoomType: 'x'. However, once the chart is zoomed, the Y-axis does not rescale to best fit the visible data. For instance, if the original Y-axis runs from 0 to 100, and I zoom on an area with data that only runs 91 to 99, then I probably want the Y-axis to change to be 90 to 100 or something similar. Basically, I want figure out how to get Highcharts to re-run its axis-scaling logic considering only the visible data.
A halfway measure is to set zoomType: 'xy' which allows the user to draw a rectangle and zoom on that rectangle. However, this is inconvenient for the user in this context, as all they really want to be able to do is isolate a date range and then study the variation in the data in that range.
If you want to stick to highchart.js and not using highstock.js (as contrary to what they were suggesting here: http://highslide.com/forum/viewtopic.php?f=9&t=13983), you can do the following with your y axis:
yAxis: {
title: {
text: 'Number of appartements'
},
min: null, // Will for min and max to adjust when you zoom
max: null, //
startOnTick: false,
minTickInterval: 1,
showFirstLabel: false
},
It works just fine for me,
Quentin