Is it possible to replace the image with simple LINE[Vertical Line] to highlight highest point or point on the chart?
HighChart with symbol(image) as the marker
One way you can do this is using highcharts plotlines:
plotLines: [{
color: '#FF0000',
width: 2,
value: 7
}]
http://jsfiddle.net/xDVTJ/
In this case, the plotLine is on the xAxis, which makes it vertical. I've specified a value of 7, which puts it on category number 7 (starting at 0).
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
Is there any way to show the summation of area charts value in highcharts without using line chart? I would like to know any other alternatives.
You can use area series with stacking: 'normal' and set lineWidth and lineColor for the series at the top.
series: [{
lineWidth: 2,
lineColor: 'red',
...
}, ...]
Live demo: https://jsfiddle.net/BlackLabel/sft7bu8r/
API Reference: https://api.highcharts.com/highcharts/series.area.lineColor
Current:
Expected One:
is there any way to fill that gap with a specific color in highcharts, i'm using chart type xrange here
thanks in advance code link in the comment
The simplest solution is to use yAxis plotBands:
plotBands: [{
from: -0.045,
to: 0.04,
color: 'red'
}]
Live demo: http://jsfiddle.net/BlackLabel/z10pjmcr/
How to combine in one area line-chart and percentage-chart like on the picture Picture URL. Both charts with the same data.
The solution in another forum
You need to create another yAxis and set its position by top property. It is also important to set height to axes be displayed correctly.
yAxis: [{
height: 200
},{
height: 160,
top: 325
}]
To the data be presented as a percentage, set stacking to "percent" on the proper series.
Live demo
https://api.highcharts.com/highstock/yAxis.height
https://api.highcharts.com/highstock/yAxis.top
https://api.highcharts.com/highstock/series.area.stacking
In this example you see that the circle I'am trying to draw doesn't show up correctly, it's not possible to draw anything under the navigator of highstock.
what should I do so I can draw under the navigator ?
renderer.circle(100, 180, 50).attr({
fill: 'red',
stroke: 'black',
'stroke-width': 1,
zIndex: 3
}).add();
If I understand your question now it is that you want to add some drawn elements below the navigator location (not behind). To do this you would need to play with your chart's size (which you are handling in your div it looks like) and then by adding the following:
chart: {
renderTo: 'container',
spacingBottom: 150
},
The spacingBottom (and the other spacing*) options let you format the non-chart chart area spaces.
I did some changes to your jsFiddle to demo one way to accomplish this here.