Chart.js: How can I manually set Y-axis range? - javascript

I am looking for a way to set Y-axis ticks manually. The reason to do that is that I am plotting % graph and some values are under 100 while others above 2000% or so. So I want to set first few values w.r.t 100 and on top in 1000s scale.
How can I do that?

Possible duplicate of this.
As the solution there suggest to try with yAxes type as 'logarithmic' and have basic tick configurations. With the mentioned axis type, you can provide Y-Axis min and max value.

Related

Override auto generated Y axis plot area values in Highcharts

I have certain requirement where I need to override the auto calculated values for Y axis in highcharts. For eg.
Here, the gridlines plot area is equally divided into 100. I wanted to override this so that the negative plot area should be at a max of let's say 50 and the positive ones can remain the same. Even if I try the max, min, softMax, softMin, ceiling and floor properties, the result is the same. I was thinking of using a secondary axis but then there is only one data in the series which would render the second one useless. I don't think using setExtremes() will be helpful either. I'm hoping to avoid modifying the library itself to add a certain option but it'll be helpful if such an option already exists in highcharts. Any suggestions?
Use tickPositions or tickPositioner property:
yAxis: {
tickPositions: [-50, 0, 100, 200, 300, 400]
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4883/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositions
https://api.highcharts.com/highcharts/yAxis.tickPositioner

Set y-axis maximum label to one tick increment higher in NVD3

I am using NVD3 (a wrapper of d3) to draw a line graph. I want the data in the graph to be within the range of the axis. However, it looks inconsistent with the other labels, as the chart displays the max value of my data set on its own. See screenshot:
In this exanple, 18,554.41 is my highest data point. What I would like to see is the ticks/axis-lables to be in the same order of rounding throughout, with no overflow. i.e. 20,000,18000,16000 etc.
The caveat is that my dataset can vary quite differently - so I can't just set a max. Is there a way of just increasing the tick count by one or something?
Current relevant code:
var chart = nv.models.lineChart()
.showYAxis(true)
.forceY([0]);
chart.yAxis
.axisLabel('£')
.tickFormat(d3.format(','))
.ticks(8);
EDIT: added https://jsfiddle.net/60equ79h/2/
on the fiddle, I would like the first data set's topmost label to be 10,000. the second would be 80. i.e I would like to the y-axis to be increased by one tick
If I understand your question correctly, you can force the yAxis to have the values you define. You can hard code the values or write something clever to identify the min & max for your yAxis.
Update your chart to have the following:
chart.forceY([0, 20000]); // [min, max]
Hope it helps

Highcharts minimum value for area charts y-axis

I have 2 charts that use identical data, one line and one area.
If the data only has positive values, the area chart shows '0' as the minimum value
However, the line chart y axis starts with a negative value instead of 0, even though the data contains no negative values
Question: How can I have the line chart y-axis start at 0 but still maintain the ability to show negative values when the data has such values? (I tried using a combination of setting min + setExtremes after the chart is rendered, but the values are sometimes incorrect, but I would assume the solution is much simpler since the area chart can do this automatically).
There is no setting that will do this, currently.
There is a feature request to achieve this that has languished for some time, here:
http://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/1848953-extend-the-axis-max-property-to-act-like-css-mi
Right now, you have to check your data, and if there are no negative values, set the min to 0, if there are negative values, do nothing.
It works by default for the area chart, because the area type has an explicit min value of 0 by default, and ignores that min if there are negative values
I suppose another workaround would be to use an area series, but set the fillOpacity to 0 - thereby displaying only a line, but using the area's axis scaling settings.

flot is it possible to set just the begining of the x axis?

I am working on flot jquery library, and I used to use this code in order to tell flot to inference the x-axis itself
xaxis: {
},
now i have a case in which I need to show the values starting from zero in x-axis, i don't care about last value, so I need flot to calculate it dinamically. it is possible to set just the begining ?
what I tried
I couldn't find such an option using google so I calculated the max value my self and I set the x-axis manually between zero and that max value. that approaches works in some cases, but i do need to handle all the senarios so i thought let me ask here first to see if there is a built-in option for that
You can set the minimum or maximum extent of the axes like this:
xaxis: {min: 0, max: 999}
See https://github.com/flot/flot/blob/master/API.md#customizing-the-axes

Default X Axis position of highchart

I have a linar chart on Highchart.lib. I am showing more than zero values on it. How can i move X Axis to the bottom, because i dont need less then zero values. See attach.
I assume from your image that you mean the y axis.
Easiest way is to simply set your y axis min and max values.
You can also work with the startOnTick and minPadding settings for a variety of control options.
http://api.highcharts.com/highcharts#yAxis
set min Value and minRange Value - thats it.

Categories