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.
Related
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 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.
By default scale of x axis is calculated from values. This gives uneven distance between two adjasted points. Like for example if I have an array of values like [1,2,5], there will be different distance on x axis for point, and also x axis labels will contain some other values, like 1,2,3,4,5. In case on dates displayed on x axis there may be cases when two equal dates are printed, looks ugly.
Take a look at this plunker. If you maximize your browser window, you could see that x axis labels have duplicates (like 02/09/2015 is visible 2 times on my screen). Also the distance between point is different.
How can I:
Make so that no duplicate x axis labes are present?
Distance between points is equaly distributed based in graph's width (not scaled based on values)?
You can explicitly set tickValues() and specify what ticks you want to show.
Alternatively, ticks() is more flexible, but gives you less control.
(Search for "D3 duplicate dates". This one may be helpful for example).
The reason the dates are repeating is that they are in fact different (equally spaced) timestamps that occur on the same day, since the spacing is < 24 hours. If you want to label with distinct dates, you could select a specific time on each day for the tick to fall on.
Trying to set the maximum value of the x-axis of a dygraph after it has been drawn.
Tried
axes = g.axes_;
axes.maxxval = maxVal;
g.updateOptions({
axes
});
You want to be setting the valueRange property. See this demo.
The trailing _ in g.axes_ means it's a private internal property. Nothing good will come from messing with it.