how to create a log scale in highstock like a log scale in this highchart http://www.highcharts.com/demo/line-log-axis ?
if i use a setting like this type: 'logarithmic',minorTickInterval: 0.1
in highstock remained does not succeed
Please take look at example with Highstock,
http://jsfiddle.net/7DDz8/
yAxis: {
type: 'logarithmic',
minorTickInterval: 0.1
},
Related
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 question about highchart's overlapping data labels. I have 2 spline data series and as you can see here http://jsfiddle.net/3E8V4/ some data labels are overlapping.
Question here is: is this overlapping even possible to prevent? If yes - how should I do it?
Code for plotoptions is like that:
plotOptions: {
spline: {
dataLabels: {
enabled: 'True',
crop: false,
overflow: 'none'
},
enableMouseTracking: false
}
},
You can use that plugin for repositioning dataLabels: http://jsfiddle.net/menXU/1/ It's not perfect, since works only for max 2 series and requires disabled animations, or you will see little delay when repositioning dataLabels.
How to use? Copy StaggerDataLabels and isLabelOnLabel functions, and then use StaggerDataLabels in load and redraw events for chart.
Sobis,
I don't have a answer that is exactly what you are expecting.
In this case what i would do is increase the max of yAxis by 10% of the maxi m of the data.
provide zoom in/out. that will enable the user to get a values on top of the points
zoomType: 'xy'
here is an example http://jsfiddle.net/3E8V4/1/
hope you will find it useful
I'm trying to use highcharts' spider chart. No problem to load it.
I have a problem in axis ranges. Some data is between 0-100 and some is 1.000.000-10.000.000. By default, highchart makes that min : 0 and max : 10.000.000 and some data's difference doesn't seem.
Could you help please ?
Thanks
You need a logarithmic chart.
yAxis: {
type: 'logarithmic'
}
Before and After
Is it possible to align the y axis tick "outside" on a highstock graph, so that it aligns with the gridline, rather than being "inside" and sat on top of the gridline. The documentation for highstock suggests that it should be placed "outside" by default, but looking at every example of a highstock graph, they always appear to be "inside".
tickPosition: String. The position of the major tick marks relative to the axis line. Can be one of inside and outside. Defaults to "outside".
Highchart example (what I want): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/
Highstock example (what I get): http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
Many thanks in advance.
Update - a solution of sorts
I came to the realisation that a Highcharts.StockChart is just a pre-configured version of Highcharts.Chart in the highstock.js file.
HighCharts.Chart has all the features of a Highcharts.StockChart - not just the features of a Highcharts.Chart in the highcharts.js file.
As a result, I have just used a highstock.js Highcharts.Chart with the configuration I require, and this places the yAxis labels in the correct position.
You can use offset parameter for yAxis.
http://api.highcharts.com/highstock#yAxis.offset
EDIT:
http://jsfiddle.net/Z4zwr/1/
yAxis : {
labels:{
align:'right',
x:-10
},
lineWidth : 1,
offset : 30
},
I've found a solution (jsfiddle): Add labels: { align: 'left' } to your yAxis options, like so:
yAxis: [{
labels: {
align: 'left'
}
}]
This tells Highcharts to align the left end of the labels with the y-axis.
Updated jsfiddle: http://jsfiddle.net/r4wrf63u/
I am using logarithmic axes on HighCharts and sometimes the chart will not render due to issues such as negative or 0 values which is totally understandable but it also fails if the axis label happens to be 0 or less as well. My question is: is there a way to capture or detect this issue during rendering so that I can dynamically change to linear axes as a fallback and render a message to notify the user why it failed?
Here is an example of a failed curve rendering due to a 0 label on the x-axis:
http://jsfiddle.net/axl163/Eqc5G/1/
Here are some more details on the HighCharts error:
http://www.highcharts.com/errors/10
I would appreciate any suggestions.
Thanks!
in your series add pointStart:1 and it should work. example:
series: [{
data: [0.001,1,1.2,1.4, 2,30],
pointStart: 1
}]
I addressed this issue by checking the values that go into HighCharts and if there are unacceptable values, the axes will automatically be changed to linear.
I resolved the problem setting the pointStart and min attribute of yAxis.
Here an example:
yAxis: {
min: 1
},
series: [{
data: [0.001,1,1.2,1.4, 2,30],
pointStart: 1
}]