I have a Highcharts line graph and I'm considering adding dataLabels to each point. According to the API documentation, you can change the vertical placement via verticalAlign, but it doesn't seem to work.
I tried editing the jsfiddle of the basic line graph to include this:
plotOptions: {
line: {
dataLabels: {
enabled: true,
verticalAlign: 'bottom'
},
enableMouseTracking: false
}
},
While the dataLabels are enabled, the vertical position doesn't change regardless of what I put for the verticalAlign value. Anyone had this issue with line graphs?
As Sebastian pointed out in the comment above, verticalAlign does seem to work but it's inverted. Per the head Highcharts developer, this is expected behavior and won't change (includes detailed explanation): https://github.com/highslide-software/highcharts.com/issues/1554
Related
I am new to Highcharts, but I feel it is so powerful and like it very much.
I am doing a multiple series chart. Here is what I have for the legend:
legend: {
enabled: true,
verticalAlign: 'bottom',
align:'center',
}
But I got too much space above and below the legend. See the picture. How can I reduce it?
Update
It seems I can use positive y value in
legend { y: number }
to move legend down, but I cannot seem to be able to reduce the space above the legend. I tried padding and margin without any success.
Thanks and regards.
Use the chart.marginBottom instead
chart: {
marginBottom: 60
}
#jsFiddle to demonstrate margin between chart and legends
If real estate is a concern, also evaluate the option of the making the legends floating
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 would like that both yAxis and their labels in charts located at http://contenidopremium.estrategiasdeinversion.com/modulos/indicadores/framework_indicadores.php?t=BBVA&k=msdgv8IUDfviuqweRH9snsdvu7wsaeuvc87awer43sdney where displayed out the plot (not overflow in chart) as you can see in this chart http://www.highcharts.com/demo/spline-symbols but I don't find the difference or the correct options. I think that the difference is that demo is highchart and mine is highstock but I'm not sure.
Could anybody help me?
Thank ins advance, txetxu.
Set yAxis.labels.align to right, and manipulate x/y values, see: http://jsfiddle.net/JJLBp/
You can alter the position of the legend using the 'align' and 'verticalAlign' options. Try something like this:
legend: {
enabled: true,
verticalAlign: 'bottom'
},
This works with highstock http://jsfiddle.net/PZzYR/.
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 write 'reversed' for yAxis: reversed: true
yAxis inverted
but the lower part of the chart is not reversed: ScreenShot
please, tell me how reverse the lower part of the chart?
You can specify settings for the navigator.yAxis explicitly,
navigator: {
yAxis: {
reversed: true
}
}
Reverse navigator y axis too | Highchart & Highstock # jsFiddle
I strongly recommend going through the api reference of highstock and its demo site, they have some great documentation and live and running example codes, you should be able to solve most of the simple use cases from these