I'm trying to use the following example which is a line and bar chart combined.
NVD3 Line & Bar Chart combination
The problem I have is that I want the line chart and bar chart to both use the same figures from y1 axis, but I can't find out how to get rid of the y2 axis and do this.
If someone could point me in the right direction it'd be a great help.
Thanks in advance.
Edit:
A JSFiddle of the problem I'm experiencing. I'm just using the example from NVD3's download and have added in Lars' code just before the return chart; line.
JSFiddle
There's no option to disable the second y axis. What you can do is set it up to have the same scale as the y1 axis and then remove it after creating the graph, i.e.
d3.select('.nv-y2.nv-axis').remove();
This will leave some empty space where the axis used to be, but at least it'll create the impression that there's only one y axis.
Much like Lars' answer, this leaves a gap where the axis used to be, but I hid this with CSS.
.y2-axis {display: none}
Related
I am trying to rotate only the <g class="tick">'s labels of this D3 bar-chart but the whole axis rotates and ends-up looking like this:
I have tried:
A .attr("transform", "rotate(...)"): The whole axis rotates...
The same inside the line .selectAll(".tick"), which causes the labels to rotate along themselves but they get relocated to the corner of the graph, like this:
How can I rotate each element relative to its own position?
You want to set .attr("transform", "rotate(...)") for only text element not the entire tick.
I figured it out with this D3 block. I have updated the chart so the old one is no longer visible. The lines added that fix the problem have been commented with "Line added to fix rotation" just in case someone comes across the same issue.
Thanks #Daniel for pointing me out in the right direction.
I want to remove (or make effectively hidden) the first vertical line in the grid for an nvd3 chart. I thought it was a problem with my chart, but after testing it, I realized it seems to be a more general problem.
I tested it by running the line:
d3.selectAll('.tick, .nv-axislabel, .nv-axis text').attr('fill','#999999')
in the console, at the simplest line chart I could find: http://nvd3.org/examples/line.html and it still didn't work! It changes all the lines except the very first vertical line. I'm baffled, I've tried every combination of classes with stroke, fill, opacity, etc - I can either affect the entire svg (with opacity), or nothing. Anyone have any ideas?
EDIT:
I should have specified this originally, I apologize - I do not want to remove the Y axis entirely. I still need the label and the tick marks - I just want to remove that one vertical line (or at least lighten it - it is much darker than the rest of my chart).
Going by your comments:
You don't want to see the " the first vertical line in the grid for an nvd3 chart"
Which is the y axis:
Two ways to achieve that:
Option1
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
.transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(false) //hide the y-axis
.showXAxis(true); //Show the x-axis
Option2:
Since in your example you are going for a CSS option
d3.selectAll('.nv-y').attr('display','none')
I will prefer Option1
EDIT post your clarification, you wish to make the y axis line light you can use:
d3.selectAll('.nv-y path').attr('opacity','0.1')
or if you want to hide it completely
d3.selectAll('.nv-y path').attr('display','none')
One solution is to specify an array of tick values that you want to use for each axis. Use axis.tickValues([values]) to explicitly declare which XAxis ticks you want for your graph. So you could pop .tickValues([1, 2, 3, 5, 8, 13, 21]); into either the chart.xAxis or the chart.yAxis, and ticks would only appear from the corresponding values in the array. In your case, you would want to put it in the chart.xAxis variable. However if you want to have a dynamic chart, explicitly declaring the tick values would pose a problem once the data is updated in the graph. If on the other hand you are using static data, this is a pretty easy fix. I've tested this solution in their live code editor and it seems to do the trick.
Refer to https://github.com/mbostock/d3/wiki/SVG-Axes#ticks to see some other directives that could be of use.
while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.
while using the older version of highchart - 2.1.6, if a plot had only one value or a series of same values, it would plot at the middle of the screen as below.
But, ever since i have upgraded the version of the highchart to 4.1.5, the line sticks to the bottom, on the xaxis. like this.
I am looking for the option to set it back to normal but, didn't find it yet. Help me out with this please.
I have tried pointPadding on the series and even maxPadding on the yAxis, but no use.
Here is the fiddle where it is replicated -
http://jsfiddle.net/ka4p4sym/2/
var chart = $('#container').highcharts();
I would set yAxis.minRange option, demo. It won't place line exactly in the middle, but will make some extra space on top and bottom.
I am trying to have my own y axis labels for the bubble chart in nvd3. Currently the labels are [1,2,3,4,5]. I want them to be displayed as [2,4,8,16,32]. I found the following function,
chart.yAxis.tickValues(['2','4','8','16','32']);
But the labels are not being changed here. I am unable to understand why.
These tick values will not have any effect if the y values themselves are not within the 2-32 range. Right now that chart only has y values up to 2+.
So, if in addition to adding chart.yAxis.tickValues(['2','4','8','16','32']); to the Chart Code/Javascript tab as you have in your question, you also make the following change to the code in the Data(JSON) tab...
y: Math.floor(Math.random() * 33) // change from y: random()
...then you will see the tick values you specified (2-32) show up in the y axis.
NOTE: I assume you are looking at the Scatter / Bubble Chart.