I have a Highcharts 5.0.14 line chart in which the x-axis crosshair will not display. The y-axis works.
xAxis: { crosshair: true },
yAxis: { crosshair: true },
Both the x-axis and y-axis documentation show objects so that's what I started with. When the x-axis wasn't working and I started Googling and found a JSFiddle with them as true rather than objects. I tried that and x-axis still does not work.
http://api.highcharts.com/highcharts/xAxis.crosshair
http://api.highcharts.com/highcharts/yAxis.crosshair
The following JSFiddle is linked directly from Highcharts' documentation. It shows crosshair: true for both x and y and it works.
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/xaxis/crosshair-both/
Inspecting the HTML I found a <path> element with class="highcharts-crosshair highcharts-crosshair-category undefined" - the "undefined" class caught my eye.
I appreciate your attention, thank you.
I got this working though I don't understand why the chart configuration resulted in the x-axis crosshair not appearing.
Before wanting to use crosshairs, when I first built the chart I was populating xAxis['categories']. I soon changed some of the chart design and no longer needed 'categories'. While making the changes, rather than delete the code to populate it with the previous data I set it to null.
Long story short, once I removed 'categories' altogether the x-axis crosshair appeared.
Strange considering the documentation at http://api.highcharts.com/highcharts/xAxis.crosshair.color states (for 'color')...
The color of the crosshair. Defaults to... rgba(204,214,235,0.25) for category axes, where the crosshair by default highlights the whole category.
I'm not sure what the last part, "where the crosshair by default...", means. Regardless, crosshairs and categories must work is what the documentation reveals.
Related
I have a highchart made with Angular.JS. Each column has its own stack level and is essentially managing its own group of data
My series is an array of objects that looks like this:
[{
name: seriesGroup.name,
data: [number],
xAxis: xAxisLevel,
stack: xAxisLevel
}]
The problem I'm having is that highcharts seems to automatically add some offset styling that moves each column out of position. Ideally I want all columns centered correctly like the one for Currency. See image above where you can see the x-positioning that's getting added to the rect tag.
Is there any parameter I can set to highcharts to disable this effect? I have not been able to find anything of the sort in the API docs.
Please take a look at the fiddle for a simplified version:
https://jsfiddle.net/nz0v8w5u/
You can make it setting appropriate plotOptions.series.groupPadding property. In your case 0.5 seems working as expected. Check the code and demo posted below.
Why do you add five xAxis instead of using just one? With one axis highcharts will automatically position columns properly and the code is much easier. Check this example: https://www.highcharts.com/demo/column-stacked
Code:
plotOptions: {
column: {
minPointLength: 1,
groupPadding: 0.5,
stacking: "normal",
dataLabels: {
enabled: false
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/7pL8mj1s/
API reference:
https://api.highcharts.com/highcharts/series.column.groupPadding
I'm building a Highcharts bubble chart and am running into a challenge formatting the data labels. The data will be regularly updated, so there will be plenty of times when the bubbles either overlap or are very close to each other.
By default, labels that are very close to one another will be omitted. However, my requirements for this chart include showing the data labels for all bubbles, regardless of their position (therefore, I'm setting allowOverlap to true).
Here is a variation of the demo bubble chart that shows my issue (see also the screenshot below): http://jsfiddle.net/brightmatrix/Lxw7koey/. Note how the labels for Portugal and Hungary run into each other at the bottom left, and how Finland and Sweden are very close together towards the center.
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.country}',
allowOverlap: true // shows all data labels, but overlap occurs
}
}
},
Is there a way to offset the data labels so they won't overlap or collide? Because the data will constantly change with each update, I can't rely on a manual offset (either through x or y positioning) or alignment to solve this problem.
For reference, I looked at the following related questions:
Highcharts bubble chart dataLabels overlapping despite z-index
Highcharts Bubble Chart - How to move an individual point's data label (dataLabel) to the front/top
I have problem with Tooltip which doesn't reflects chart's data series. It shows 0 value at point where chart shows something different.
This is how it looks:
I've created JSFIDDLE which shows the problem.
To reproduce this you need to move Range selector to point shown on above charts. But be careful, you cannot stretch it. You need to click in the middle of Range Selector, otherwise it will work. If you do this correctly Your cursor will change to two-sided arrow.
And now the question time:
Is it bug in Highstock code or mine?
You can disable datagrouping then your points will be correct.
plotOptions:{
series:{
dataGrouping:{
enabled:false
}
}
},
http://jsfiddle.net/cy96hd4j/2/
I have a highcharts chart that I need to plot but which has lines which can go back on themselves on the X Axis.
e.g. jsfiddle example
My problem isn't that I can't plot it but rather the series tooltips don't display correctly.
If you zoom right in to individual points they seem ok, but not at normal zoom level.
E.g. if you scan your mouse across the series from right to left it doesn't want to show you the tooltip on x Value 1, intead it jumps to the second set of values on x value 2.
I've changed the tooltips to being not shared:
tooltip: {
shared: false,
},
but this has made little difference, apart from now it seems to work when zoomed in, but I suspect this is only because there are only one set of x Axis values visible.
Does anybody know how it is possible to configure Highcharts to allow for series where the x values aren't sorted either ascending or descending as I can't find anything in the documentation.
From the API documentation:
Note that line series and derived types like spline and area, require
data to be sorted by X because it interpolates mouse coordinates for
the tooltip. Column and scatter series, where each point has its own
mouse event, does not require sorting.
So change your series to type: 'scatter' with a lineWidth > 0. Here's an updated fiddle.
I am trying to get more space between my highcharts plotArea and the xAxis... nothing so far seems to be working. The picture shows how close they are and I am wanting to add about 30 more px to it.
Thank you for the help!!
Assuming I unerstand your question correctly...
Here is a standard xAxis and an altered yAxis from the Highcharts documentation.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-x/
Now, here is a fork of that fiddle, but with the labels of the xAxis pushed further down.
http://jsfiddle.net/BCPL5/
The relevant Highcharts API documentation:
http://api.highcharts.com/highcharts#xAxis.labels
The alteration to the xAxis is in this statement.
...
xAxis: {
labels: {
y: 25
}
},
...
Now, you could also use offset, as can be seen in the Highcharts example below, but I don't believe that is what you want in this case.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/yaxis/offset/
You can try to set min/maxPadding http://api.highcharts.com/highstock#yAxis.minPadding