I have a bar highchart and it looks like this:
What I want to do now is this: the x-axis should start from 0, but from 100, because everything below 100 is basically a failure and everything above 100 is a success. Now, the x-axis starts from 0 and the bars go above it. If it starts from 100, the values lower than 100 should start from the x-axis and go below it. Something like this, only instead of 0, the x-axis will be 100.
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
Tried to implement scroll on Barchart using scale x to 2 for zoom in. But the issue is the x-axis values are not center-aligned with Bar chart.
Labels count is based on day and month values.
barChartView.xAxis.axisMinimum = 0.0
barChartView.xAxis.axisMaximum = Double(labels.count - 1)
barChartView.setVisibleXRangeMaximum(Double(labels.count)/2)
or
barChartView.zoom(scaleX: 2, scaleY: 0, x: 0, y: 0)
for scroll implemented like,
barChartView.xAxis.setLabelCount(Int(Double(labels.count)/2), force: true)
Please suggest to us the correct approach to avoid miss align of x-axis values with the bar chart.
From your code, I assume your expected behaviour is that the chart
shows at most half of all available bars
allows the user to zoom indefinitly (minimum = 0)
allows the user to scroll (left/right)
If this is the case, you would apply the following code:
barChartView.xAxis.axisMinimum = 0.0
barChartView.xAxis.axisMaximum = Double(labels.count - 1)
barChartView.setVisibleXRangeMaximum(Double(labels.count)/2)
barChartView.xAxis.setLabelCount(Int(Double(labels.count)/2), force: false)
.zoomshould be avoided since it sets multiple unwanted values (scaleY, x, y) and hence adds unwanted features when scrolling.
It is important to set the force flag to false. This is the parameter that caused your miss alignment as described in the documentation:
https://weeklycoding.com/mpandroidchart-documentation/axis-general/
setLabelCount(int count, boolean force): Sets the number of labels for the y-axis. Be aware that this number is not fixed (if force == false) and can only be approximated. If force is enabled (true), then the exact specified label-count is drawn – this can lead to uneven numbers on the axis.
I am using iOS charts library and in my application there could be lots of x axis values for my bar chart view but, I need to show few of them. I have tried to do it with barChartView.setVisibleXRangeMaximum(12) though it is causing some weird issues. (Like Bar chart's bar fill all x-axis) Instead of using that function I am trying to use zoom property barChartView.zoom(scaleX: 4, scaleY: 0, x: 0, y: 0) . However, I am not sure how many x axis values come when I draw the chart. In some cases, it's 60,84 or 800. How can I calculate right zoom ratio to accomplish for showing 10-12(any number between them enough for me) x-Axis values?
You might want to use:
barChartView.setVisibleXRange(minXRange: 10.0, maxXRange: 12.0)
instead of:
barChartView.setVisibleXRangeMaximum(12.0)
I have a core-plot graph, that has values from 50 to 250 and the interval is set to 20. However the labels underneath the graph are as follows: 40, 60, 80, ..., 260. What I want from them is to become: 50, 70, 90, ..., 250. I guess that has to do with the starting value of the x-axis (which is 0 and because the interval is set to 20, the labels are in that condition). I'll be extremely grateful if you suggest a solution for this.
Best regards,
Boyan
Use the labelingOrigin to adjust the starting point for fixed interval ticks. Setting it to 10 (or 30 or 50, etc.) will work.
see this jsfiddle: http://jsfiddle.net/k0hrz224/2/
i want the max value of the yaxis to be 100. currently, as you can see, it is 150 and i dont know why, because i explicitly set max: 100 of this yaxis.
i know that changing (on line 101)
min: -25
to
min: 0
seems like a solution. however i need min: -25 because i want to display A and B as it is shown in the example.
Things can get a little odd when you have multiple y axes.
Add this to your chart:
chart: {
alignTicks:false
}
Which will stop the different axes from trying to resolve with each other, and stop your axis at 100.
Example:
http://jsfiddle.net/jlbriggs/k0hrz224/4/
Reference:
http://api.highcharts.com/highcharts#chart.alignTicks
finally i managed to do it. i "hardcoded" the ticks on my own:
tickPositions: [-25, 0, 25, 50, 75,100]
then i experienced the desired behavior, i.e., no wrong autoscaling of any axis.