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.
Related
I need to make somewhat of a grid which is dotted, like on the image here:
How would one go on and do about something like this? I know how to do gridlines full, but I want to have dotted gridlines.
You can use gridLineDashStyle to make dotted gridlines:
xAxis: {
gridLineDashStyle: 'dash',
gridLineWidth: 1
},
More style examples can be found here can be found here: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/
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
I got problem when try connect nodes in opposite direction, to get loop.
How can i configure line that connects "Alpha","Beta","Gamma" and "Page views" not to break?
Here is my code:
jsfiddle.net/Hideon/n6Lqutch/4/
I want make something like this:
Connecting points backwards is not fully supported in Highcharts sankey series yet.
This problem is reported on Highcharts github: https://github.com/highcharts/highcharts/issues/8218
For now, the workaround is to set right marginBottom and clip to false:
chart: {
marginLeft: 50,
marginRight: 50,
marginBottom: 100
},
series: [{
clip: false,
...
}]
Live demo: http://jsfiddle.net/BlackLabel/t3jLszqy/
API:
https://api.highcharts.com/highcharts/chart.marginBottom
https://api.highcharts.com/highcharts/series.sankey.clip
Is there any way to draw icon/images/triangle anything inside the chart plot?
Like that image, this example, check the green triangle (the red mark is just to show). Is there any way to draw something like that inside?
I tried to using the legends, but it's kind hard to add a new one just for it.
Thanks
Edit:
I tried using the API, but if I resize the page, the chart resize and the the image stays on the same, that's not good at all, I would like the image to remain on the side of the chart. Like the legend.
Does anyone know nice solution for it?
Use either labels or Renderer.
Add the following code at the end:
, function (chart) {
chart.renderer.text('▲', 0, 0)
.attr({
align: 'right',
zIndex: 8
})
.css({
color: '#73903B',
fontSize: '48px'
})
.add()
.align({
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: -40
});
});
DEMO : http://jsfiddle.net/2PNCG/ (Fixed position when resize, bottom right / lower right)
Reference:
http://code.highcharts.com/highcharts.src.js (credits part)
Other possible approaches:
Use chart.plotWidth, chart.plotLeft, chart.plotHeight with marginRight
Use left, top in labels
Related Questions:
Adding a line of words towards the bottom of chart (Bottom Left / Lower left)
How do you add text to the bottom center of legend and bottom center of chart under legend? (Bottom center)
Highcharts - change font size of text on chart (Fixed position)
Move images rendered on highcharts on resize (Fixed position)
This is the kind of thing easily found in the API.
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).