I have made a scatter chart based on the example found here.
I wish to remove the grid lines from the plot.
On How do you remove the background gridlines in nvd3.js? I found a description I could use:
.tick {
opacity: 0;
}
but I do not know where in the code to put it and I cannot make it work.
Thanks for any inputs :)
Add this line of CSS to your nv.d3.css file
.nv-axis .tick line {
display:none;
}
This removes background grid-lines but keeps the details on the Y and X axis.
Related
I drawn a Line graph using chart js. it works well but problem is it will start all the lines from 0 but i need some padding between graph line and axis line it. I need like
I need this Gap ( Red Marked ). How can i achieve this??
From the fiddle you provided, A tricky way will be to push in $scope.labels and $scope.data a null in first position:
$scope.labels.unshift('');
$scope.data[0].unshift(null);
$scope.data[1].unshift(null);
A start you had:
And you will have:
I am trying to add tooltips on multiple lines chart following Mark's answer in this post and this example . Here is my JS bins https://jsbin.com/fexami/edit?html,js,output#J:L131
My design for this chart is..
When the chart is initialized, only the lines with solid color show up and the dashed lines are hidden. Dashed lines can show or hide when click A2 and B2 on the right side.
I was trying to add tooltips on the dashed lines but they do not show up when dashed lines are showing. I created the tooltips for dashed lines by adding class mouse-over-effects2(line 133 - 223). Actually, all the code form line 133 to 223(code for dashed lines' tooltips) is copied from the code from line 225 to 315 (code for solid lines' tooltips) and just some names are changed. From inspect elements in the browser, it looks like the lines of code from 288-315 overwrite 196-223.
Second question is..How to insert "state” into the tooltips to make the tooltip show both the value of “y” and state. I was trying to add text after line 177, but it does not work.
Here is my updated jsbins
Does anyone have idea to fix it? Thanks a lot!
Updated
Please ignore the first question. I just fixed it. But still don't know how to solve the second one.
Can anyone help? Thanks a lot!
Yes - change
var lines = document.getElementsByClassName('line1');
to
var lines = document.getElementsByClassName('line2');
and the tooltips will display on the dashed lines.
I am fairly new to D3 and I am trying to make a stacked area chart with no success (similar in looks this one: http://nvd3.org/examples/stackedArea.html).
So far I have a stacked multi-line chart, so I was hoping there might be an easy way to just fill in the color down to the bottom of the graph, but when I try to do the fill, it colors it wrong. Here is a fiddle to help (although the code doesn't start until line 1707 because the first chunk is the JSON: https://jsfiddle.net/wL04qqk1/2/
In the CSS, I tried making it look like this:
.line1 {
fill: #0066CC;
stroke: #003D7A; /*stroke: steelblue;*/
stroke-width: 2px;
}
But it doesn't fill it in properly.
Thank you so much for your help!!
Please see the updated fiddle at: https://jsfiddle.net/wL04qqk1/3/
I added the style staight to the paths you are plotting see below:
var path4 = graph.append("g")
.append("path")
.data([data4])
.attr("class", "line4")
.style({'fill':'red'});
Hope this helps :)
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;
}
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?