I am trying to hide the X axis of the Shield UI Chart. The chart's type is bar. I tried to use enabled:
axisX:
{
enabled:false,
},
but it doesn't work. I than tried to set the line's thickness to 0, but this is not working either. The line retains a minimum thickness. Any ideas?
As ot the current version Shield UI Chart, depending on the chart type, of course, the X axis cannot be hidden by setting a specified property. However the effect of invisibility can be achieved by setting the axis color to match the plot's color. Or to white in the most cases.
Related
In my highstock charts i required label on the left side of the graphs. When i used opposite: false + align: left for labels they are positioned above graph. But i want to start graph rendering after labels ends.
Left side labels without required graph render
I saw solution for my problem in Highcharts not in highstock some time before. But now i cant find it to show what exactly i need
Expected result
Thanks in advance
OK, so you want the labels inside the plot area.
You can do this by adding
labels: {
align: 'left',
x: 0
}
to your yAxis properties.
This moves the starting point of the labels to the axis line, and extends the labels to the right from that point. If you want them pushed further inside, just increase x.
The problem that you'll run into is that the plot will not respect the label placement - your line will still start at the same point, as if the labels weren't there.
Normally, you could just use the minPadding setting on the xAxis to increase the space for the labels, but this doesn't work in the case of the navigator, as explained here:
http://api.highcharts.com/highstock/xAxis.minPadding
When the axis' min option is set or a min extreme is set using axis.setExtremes(), the minPadding will be ignored
I am sure there is some work around for this problem, but I do not have the solution currently.
Updated fiddle:
http://jsfiddle.net/d6mre68v/
I used the multiple axes on the highchart
During Zoom operation the x values are getting hidden
I used linked to attribute also
JsFiddle
zoomType: 'y',
zoomType: String
Decides in what dimensions the user can zoom by dragging the mouse. Can be one of x, y or xy.
Try it:
None by default
x
y
xy
I referred this jsfiddle to figure out what's happening. I think, this behavior is not a bug/issue.
This github issue mentioned in comments is not the problem here. Because what it is saying is to use linkedTo: 0 which is already present in this example.
It actually depends on how much area and more importantly from where to where you select for zooming in. Let's see that by examples:
In the following image, the rectangle signifies the width of one column.
Now, if you start your pinch from more than half of the width of any column or end the pinch after half of the width of a column, that column would be fully visible along with x-Axis labels.
But, if you pinch any less, say from the middle of orange bar of first column, till middle of next column's blue bar, it's not going to show whole columns and hence it ends up with hidden x-Axis labels.
In Highstock charts, any gap will always have the same width (it seems the width of the smallest distance between points) regardless of the time interval of the gap, resulting in narrowing of the time/x axis, while this doesn't happen in the "navigation" series.
Is there any easy way to make the chart preserve the spacing of the gap according to its duration, as it already happens in the navigation bar (thus keeping the x axis without narrowing)?
Standard Highstock chart is using ordinal xAxis by default.
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart. Defaults to true.
You can try disabling this parameter by setting xAxis.ordinal to false http://api.highcharts.com/highstock/xAxis.ordinal
xAxis: {
ordinal: false
},
I'm trying to make a toggleable axis using nvd3s charts, specifically the line chart example. After running this example, opening the console, and typing chart.setXAxis(false) the x axis does not hide. Is there some documentation or some reason why this isn't working? It doesn't seem to work for any boolean either.. once it's true, it's not changeable to false.
setXAxis just tells the chart function whether or not to draw the axis when it draws the chart, it doesn't do anything to the existing axis. You'd be better off just selecting the axis directly and changing its visibility style.
Given the class names that NVD3 uses for it's axes, to hide the x-axis you would use:
d3.select("g.nv-axis.nv-x").style("visibility", "hidden")
That hides the axis, but doesn't delete it, so you can easily re-show it again (without updating the chart) with the same select statement but visibility style visible.
What I would like to do is plot a single series with two y-axes "locked" to the same data -- for instance, °F and °C temperatures (or feet and meters, etc.) that could be read off either axis, but only one set of points would be plotted.
Things I have tried:
1) Create two series, the second with the converted values, and plot on "on top" of the other (in this case, there's a constant conversion value of 1.51):
date,unit1,converted_unit2
2012-03-19,1.598333,3.108333
2012-03-20,1.542083,3.052083
2012-03-21,1.483333,2.993333
Generally works; however, Dygraphs dynamically scales both y-axes independently to be "pretty", and so the two series don't always plot directly on top of each other.
2) Set visibility of the second series to FALSE:
series: { 'converted_unit2': { axis: 'y2' } },
visibility: [true, false]
Doesn't work: Dygraphs defaults to scaling secondary y-axis for invisible series to 0-to-1.
3) OK, keep them both visible, but set the second series to transparent:
series: { 'converted_unit2': { axis: 'y2' } },
colors: ['#000080','rgba(0,0,0,0)']
This almost works -- however it has the side effect that the label for the second series in the dynamic legend is now transparent. And, since the axes are still being independently calculated to be "pretty", they are not exactly aligned -- the secondary y-axis is potentially a few percentage off the first y-axis.
(I also tried setting the second series visibility to FALSE and manually setting the second y-asix using the values obtained from yAxisRange(), which works well, but the second y-axis doesn't respond correctly to zooming the graph.)
Is there a way to easily create two y-axes for a single series which are "locked" together?
Thanks,
-bryan
same problem here ;)
we used to add a second (dependent) axis by using a single data point in a second series (which allowed a second axis) and fixed axis ranges for both axes (the second range calculated from the first range). Second color was set to transparent, second label was hidden ... worked fine until we had to switch to dynamically scaled axis ...
the second series in the dynamic legend is now transparent
hm, you can change this with css (as it's an inline style, you'll have to use !important to override it) or js (remove the inline style or change it).
Yes, an option for a second (dependent) axis would be great!
Jean
Set the stroke width of the second series to 0:
series: {
converted_unit2: {
axis: 'y2',
strokeWidth: 0
},
}