I'm trying to remove the X and Y axis ticks and keep their corresponding values.
http://c3js.org/samples/simple_xy.html
So here I'd want to remove those little tick lines on the X and Y axis, but keep the values. What is the best way to proceed here? I couldn't find a way through the c3js config to change this. Thanks!
Try the following CSS rule:
.tick line {
display: none;
}
Related
is it possible to hide the Y-Axis for a graph that has been disabled via the legend?
Right now it looks pretty messy, as disabled-graph-Y-Axis are just reset to the default range.
Picture of the chart
Thanks guys!
Where you make your axes, instead of setting display: true set it to display: 'auto' this will make it so that when all datasets that are linked to that axis are hidden the axis disapears
I have d3 graph with xaxis and Y axis.I want to add axis to the top and right to make it look like a box.
Something like This.
You could go through this article for adding multiple axes. You should create new axis generators and give the orient as 'right' and top and call them finally.
http://www.d3noob.org/2013/01/using-multiple-axes-for-d3js-graph.html
EDIT:
I have made a simple line chart with your requirements. Have a look at https://jsfiddle.net/j0kaLf59/
Also as mentioned in the comments, you could just add two line elements. Have a look at this fiddle https://jsfiddle.net/a6o2hkfq/
Reference:
Create a D3 axis without tick labels
http://www.tutorialsteacher.com/d3js/create-svg-elements-in-d3js
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.
I have this chart, but as you can see it has some problems:
The tooltip height is wrong, there is that ugly blank space at the top. Since nvd3 has no documentation I really don't know how to proceed;
The x axis labels are all overlapping, I want either to remove them or to tilt them (like 45 deg.). The second option is best. I also tried .staggeredLabels(true) but they still overlap.
EDIT: I solved the second one by removing labels. Actually I don't remove them but rather hide them with:
.nv-x text {
display: none;
}
Since no one answered I just post the solution to the second problem:
.nv-x text {
display: none;
}
The blank spot is actually the key. It seems like maybe your object doesn't have a name?
Want a simple fix for jqplot axis display. I am using Bubble charts for chart display, and CategoryAxisRenderer for axis.
All I want is the axes to display in top-down fashion, rather than the default bottom-up one. Meaning, the x axis is displayed on top of the chart increasing from left to right, and the y axis starts from the top increasing from top to bottom!!
Have looked in for various in-built jqplot options but to no luck. I am afraid that the solution lies in altering the css definitions for jqplot axis, but i do not want that, as it would consume huge amounts of time just to understand someone else's css. Please if someone could help!
Have got my solution finally.
Reversed the array that had to be printed row wise, hence both chart and the y axis came up correctly.
The second x axis , did not solve my problem. Instead for the particular chart id , modified the the css class jqplot-xaxis and that did the trick.
myBubbleChartId .jqplot-xaxis{
position : absolute;
top : -20px !important;
}