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
Related
Suppose I have a linechart with multiple lines (the number is dynamic) and I would need to always scale the Y so that all lines are shown - so the scale should always be based on the range with highest values. Is there a way how to it automatically? I found some example with automatic yScaling using d3.max but that is done for a known dataset. In my case, I do not know what range will be the one to use.
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.
I'm making a c3 chart that has grouped data, and I'd like to have a y-axis grid line that shows a maximum value, that the grouped data combined should not exceed.
So, the y-axis grid line could be called "Maximum"
I know how to make the grid, but it doesn't always show because the grouped data might be way below the grid value. But I want the grid to always show.
I looked at padding for the y-axis, but it's uses pixels and is hard to get accurate.
Is there a away to just set the y-axis to show like 5 values greater than whatever the y-axis grid line is?
Unfortunately, C3 does not have a setting for "set Y axis to maximum of yvalue or largest data". However, let's assume you have added a grid line using a method like below. You can then set the y-axis padding and maximum value using the settings shown here:
grid: {
y: {
lines: [{ value: 20 }],
}
},
axis: {
y: {
padding: {top:5, bottom,0},
max: 20
}
}
In this case I have set the max value to be the same as the gridline value and used padding to create a small space above it. This will handle the case where your data is below the gridline. However, if your data exceeds the (gridline+padding) total then the chart won't grow to accommodate that data because the max setting is fixed. So, you will need to dynamically change this max value using javascript if your data is greater than the max value by finding the maximum value in your data and setting max above that if it exceeds your gridline value, something like this...
if(highValue > gridlineValue)
chart.axis.max(highValue);
else
chart.axis.max(gridlineValue);
I just noticed that your data never exceeds the gridline, so you can go with the first part of this answer. I've left the rest in here in case someone else wants a more dynamic solution. Note that you could also just use the max value without padding if you wanted to set it explicitly to a value higher than the gridline.
As of this writing, there actually is a way to reset the y-max to be dynamic, after setting it to specific max. You do so by setting max to undefined, like so: chart.axis.max(undefined);.
Here, have a working jsfiddle.
I'm working with C3.js to build graphs for my JSON data. However, I do not understand what decides the Y-axis ranges on the graph. I have a common code to generate 2 bar charts, out of which one comes as expected whereas the other one has high range for Y-axis causing my data bar being diminished. Please take a look at the image below.
The bar chart on the left has data value equal to 1, yet the axis ranges to 35. A similar graph on the right adjust well.
Does anyone know what could be the reason for this?
As yo can read in the doc there is a parameter to set the Y max and min. So you can set the max value dynamically. Or you can set de Y.padding to be 0, so the Y axis will be shorter.
C3.js calculate the Y axis hight dynamically, and I think that have a min default hight.
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.