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.
Related
I would like to plot the values of x and y suing a progressive line chart for my presentation. Any pointer to the right direction or where I can read I will appreciate. So far the closest I have gotten is chart.js here https://github.com/chartjs/Chart.js/blob/master/docs/samples/animations/progressive-line.md
sample of expected resyult
I would like the graph to grow progressively upto a maximum set value of Y as represented by point k
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
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.
I have a line chart with x Axis being numeric and y axis being numeric as well. I want the y axis to be reversed so that higher values are at the bottom of the axis and lower values at the top. I looked at the API Docu and didnt find a config to reverse the axis or so. Any clues?
In ExtJS 3 there was a reverse config option to get this going. With ExtJS 4 you have to use workarounds.
For reverting the x axis values you could use the sorters property of the store connected to the chart.
But for reverting the y axis you have to convert your values. Here's a sample on how to achieve this: http://www.sencha.com/forum/showthread.php?132148-What-has-happen-to-quot-reverse-quot-config-on-chart-axes&p=949699&viewfull=1#post949699
If you visit the URL below you will see that the graph is being generated properly, but that there are not labels along the x and y axis to indicate the data values:
http://chart.apis.google.com/chart?chs=600x300&chtt=Release+Burndown&cht=lc&chdl=estimated|actual&chco=FF0000,00FF00&chxr=0,0,30,2|1,0,40,2&chds=0,45&chd=t:45,34,23,12,0|45,20,15,32,31,25,0
Can anyone figure out how to get the x and y axis data values to show up?
According to the API, you can do this through the chxX parameters:
http://code.google.com/apis/chart/image/docs/gallery/line_charts.html#gcharts_axis_styles_labels
chx1: make custom values as labels
chxs and chxtc: to specify color, size, alignment, and other properties of both custom and numeric axis labels
Let me know if you can't figure it out.