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.
Related
Is it possible to show the value labels of the y-value below the x-axis instead of showing them inside the chart in Rechart? I have found nothing similar to this in the examples on the Recharts page and the API does not have options for this either. (At least I didn't find them) An example of what I mean is in the link below.
value labels below x-axis
Use the "position" prop with only "y" value to set the position along Y-Axis. This will only fix the Y-Axis position and the X-Axis would change, hence giving you the Tooltip the way you require.
We are using this chart. I see there is no property available to customize the colors of the pie chart.
Is there a way to customize the colors ?
Also how can we enable legend for this (if we could display legend in the bottom of the graph, it could be great. i.e like this )? and display only percentage on the graph?
To make the graph exploded, i see we need to use ["pulled": true] in the dataProvider. Instead of providing it inside the dataProvider, is there a way to provide somewhere outside ?
There are two ways to customize colors
1) Use the colorField and define the colors directly for individual slices.
2) Set your own theme by modifying the colors array or create your own theme.
Legends are enabled by setting an empty legend object in the chart config. You can find further configuration properties in the documentation. You can even change the value label to use percentages by modifying the valueText property. There's also an example of a pie chart with the legend set up and a completely custom legend.
If you want to change the pie slices labels, change the labelText.
As for your last question, no - it's using pulledField to specify which slices are pulled out in your data. There isn't a setting to explode the entire chart without it.
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.
I've been playing around with a highcharts bar chart and noticed some strange behavior. If I have a long name in the x axis (the categories), and if I have labels enabled to show up on the bars, not all the labels will appear. If I remove the long x axis name, then the label that wasn't appearing on the bar before will suddenly appear. I have a working Jsfiddle example here:
https://jsfiddle.net/p55t0bmf/ (notice label isn't appearing for one of the bars, should say 5 but nothing is there)
I placed a long name in the categories section to trigger this behavior:
xAxis: {
categories: ["LONG NAME THAT WILL BREAK US"]
}
Does anyone know why this would be happening, and is there a way to fix this behavior (without resorting to short x axis names of course)?
Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category.
Demo with all labels: https://jsfiddle.net/p55t0bmf/1/
stacking option cause this problem. If you set the stacking, then highchart change the label opacity automatically.
Solution : Remove stacking options from chart, if you dont need or write css to override label opacity.
Flot chart is repeating ticks on right Y axis when:
alignTicksWithAxis:1
I want to align both axes but hide repeated tick values.
http://jsfiddle.net/AUrfY/20/
Is there something in the API i have missed or i have to check thicks before painting and hide duplications.
Set the tickDecimals option to 2 to get reasonable labels for the right y axis (see this updated fiddle).
The label values are not really duplicated, but they are rounded so that they seem so.