In the stacked bar shown below
the negative values are represented with the reference line on top, this seems to be redundant with the original axis present below, is there a way to actually show only one axis in the place of 0 marker?
You can set a parameter opposite as true.
xAxis:{
opposite:true
},
Example: http://jsfiddle.net/2s85hcbu/
You can also disable gridlines on yAxis
yAxis:{
gridLineWidth:0
},
Example: http://jsfiddle.net/2s85hcbu/1/
Related
I have the first chart:
Multiple y-axis with broken y-axis for left-hand-side y-axis only
The left-hand-side y-axis is broken from 1M to 25M, while there is no broken setting for the right-hand-side y-axis. The horizontal lines for the 2 y-axis in the chart area make it a little bit hard to read. It can be improved by setting the broken for the right-hand-side y-axis from 250K to 6.25M like the 2nd chart shows:
Multiple y-axis with broken y-axis for both y-axis
The broken setting is set by user. They cannot preview the result when configuring the settings.
I want to have a chart with the horizontal lines for both hand side overlapped with each other. I can only add the broken setting for right-hand-side y-axis. But I should know the min & max value for all the series used. The min value is default to be 0, but the max value for the series which use left-hand-side y-axis is around 44M, while it is around 13.5M for the right-hand-side y-axis. But the chart shows me 56M for the left-hand-side y-axis, while it is 14M for the right-hand-side y-axis. I cannot predict the max value for the y-axis while generating the chart setting.
Is it possible to add the broken setting for the right-hand-side programmatically? Or is there any other approach?
Is it possible to add the broken setting for the right-hand-side
programmatically? Or is there any other approach?
Yes, adding programmatically calculated breaks seems to be the only way. You can use for example chart's load event where you have access to all the required values.
For example:
chart: {
events: {
load: function() {
const yAxes = this.yAxis;
yAxes[1].update({
breaks: [{
from: 20,
to: 40,
breakSize: 0
}]
});
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/s01box6p/
API Reference:
https://api.highcharts.com/highcharts/chart.events
https://api.highcharts.com/highcharts/yAxis.breaks
I want to change the display position of the chart y axis value.
In the example chart, the y-axis values are displayed to the right of the entire chart.
But I want to display it on the left rather than on the right.
What to do in this case?
enter link description here
You need to use the opposite property:
yAxis: {
opposite: false
}
Live demo: https://jsfiddle.net/BlackLabel/wx0qdypt/
API Reference: https://api.highcharts.com/highstock/yAxis.opposite
I need to add graphic annotations in a chart on the date (x) axis, so I added a new series with a constant value of 0 (x: date, y: 0), with custom image markers. Annotations look like this:
The problem with this approach is that the constant 0 value in the annotation series is messing around with the automatically placed ticks (on the right), which then stretch the whole Y range from 0 onwards, instead of the min and max of other series, as it is by default. That drastically affects the display of other series, whose value are far away from 0, making them look less diverse.
Highcharts comes with an annotation module, bit I didn't find an option to pin it to the axis and use a different graphic.
Is it possible to either:
a) Prevent the annotation series to influence the Y axis ticks?
b) Make customized annotations on the X axis without adding new constant series?
The easiest solution here I think would be to create a new yAxis, and have your constant series use that yAxis. Like this:
yAxis: [{
...//original yAxis
}, {
visible: false //this hides all axis lines, ticks, and labels
}]
Then in the series, you would set:
series: [{
... //Real data series
}, {
yAxis: 1, //constant series
...
}]
I have a Highcharts with two series (one as type "line" and other as "scatter"). The "line" serie has 1000+ value points and the "scatter" serie has one value point (the y value of this point is = 2)
I want to select the "scatter" point on the yAxis, but this point will not be selected. Instead of this point, the other points (line) are selected. The property "allowPointSelect" is set to true
Other important options that are enabled:
crosshair = true (xAxis only)
stickyTracking = true;
What I have tried already:
the radiusPlus and radius properties changed to bigger value <100 (plotOptions.series.marker.states.hover and plotOptions.series.marker.states.select)*
Note: It's very difficult to reproduce this in jsfiddle with 1000+
values :(. That's why I added some screens).
Does anyone have a solution for this?
If you are never wanting the user to select the scatter point (or any scatter points) you can set the zIndex of the series such that the line series is rendered "above" the scatter series. From the docs:
zIndex: Number Define the visual z index of the series.
Defaults to undefined.
With no z index, the series defined last are on top With a z index,
the series with the highest z index is on top
I want to format the yAxis label and add trailing zeros after decimal. The number of precision will be decided dynamically as per the value of yAxis labels.
For Example: If there are 3 labels in yAxis with value 95.8, 95.825, and 95.85. then, it should be displayed as 95.800, 95.825, 95.850.
Edit:
Actually, the requirement is to have the decimal precision dynamically. Actually sometimes, our chart shows labels as 93,94,95, in this case we don't want to add precision. The idea is to add same precision, if the chart is generating, yAxis labels like 94.25, 94.5, 94.75, then, I want the chart to show yAxis labels as 94.24, 94.50, 94.75.
For dataLabels there are some format parameters you can add to your y values.
You can add this to the plotOptions structure like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y:.3f}' // <<< .3f is 3 decimal places out.
}
}
},
Here is a modified fiddle:
http://jsfiddle.net/ja799vep/
More details from highcharts.com:
http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
EDIT:
Sorry the example above was just for datalabels...Here is an improved example that shows, xAxis, yAxis, dataLables and toolTip with different '3 decimal place' approaches.
http://jsfiddle.net/franktudor/okce7p7n/