I am looking for a way to display tick markers on both side of axis. But highcharts api is allowing us to place it inside or outside and not both. Can someone share some pointers?
One way achieve this look is to create two axes and link the first axis to the second one. Then one axis has tick-positions on the inside and the other on the outside. Like this:
xAxis: [{
tickPosition: 'inside',
labels: {
enabled: false
}
}, {
linkedTo: 0
}],
Working fiddle example.
The labels are disabled on the inside axis to avoid double labels.
Related
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
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
Is there a programmatic way to provide axis labels for individual bars in a grouped bar chart in HighCharts?
Use case: The use case is when dealing with a graph that is both grouped and stacked. With these graphs it is hard to visually convey (without a tooltip) what the individual bars represent, unless they have individual labels.
Default behavior:
As an example see the HC demo for a stacked and grouped column graph, in which it might initially be unclear that the individual bars in each cluster represent different genders: http://www.highcharts.com/demo/column-stacked-and-grouped
Goal: Here is an illustration of what I am trying to achieve. Is it possible to do this programmatically, such as with a second x-axis? Perhaps another idea would be to use clever placement of the stack total, but of course that would get in the way of showing the actual stack total.
There are a few options which may help you.
Firstly, the stackLabels formatter allows you to determine what is in you label.
Secondly, veticalAlign:"bottom" allows you to position the labels at the bottom of the stack.
Thirdly, the 'y' option allows you to move the label relative to its default position.
The catch is that you can't seem to move the label outside of the chart plot area. One way round this is to start your y-axis at a negative value to give room for the labels. You can then move the position of the x-axis into the chart area.
http://jsfiddle.net/WY6QB/
xAxis: {
offset:-43,
labels:{
y:40
},
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
stackLabels: {
verticalAlign:"bottom",
y:20,
enabled: true,
formatter: function() {
return this.stack;
}
}
The only thing left is to try to remove the spurious '-2' y axis point.
-EDIT-
If you set startOnTick to false, and give the y-axis min as -1.9, the spurious -2 point goes away.
min: -1.9,
startOnTick:false,
http://jsfiddle.net/V6Cp2/
It is not exactly the same result as your image, but it displays the stackLabels:
yAxis: {
...
stackLabels: {
enabled: true,
formatter: function() {
return this.stack;
}
}
},
It displays the label at the top of the column.
Example
You can use grouping categories plugin.
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]
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/