I'm trying to add axis labels to a NVD3 Multi-Bar Chart, but it only seems to work for the x axis. Is there any way around this?
I have set up an example here: http://jsfiddle.net/msts1jha/2/
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(d3.format(',f'));
chart.yAxis
.tickFormat(d3.format(',.1f'));
chart.xAxis.axisLabel("x axis");
chart.yAxis.axisLabel("y axis");
Your yAxis is hidden, set the left margin on your chart, and it will work.
Try this :
var chart = nv.models.multiBarChart().margin({left: 100});
More info regarding margins have a look here
Hope it helps
Related
What's the best way of adding horizontal gridlines to a d3 gantt chart like in this example? I was originally thinking of making an axis and making the tick marks the length of the chart (as in this example), but this puts them directly in the middle of the chart rectangles.
Is it possible to make the axis ticks into "lanes" around the rectangles, or would it just be easier to plot lines (as done here)?
A solution comes from this issue post on GitHub. Basically just translate the axis group by half the width of the band:
var yScale = d3.scaleBand()
.domain(lanes)
.rangeRound([0, chartHeight], 0.1);
var yGridAxis = d3.axisLeft()
.scale(yScale)
.tickFormat('')
.tickSize(-chartWidth);
chart.append('g')
.attr('class', 'grid')
.attr('transform', function(d) {
return 'translate(0,' + (-yScale.bandwidth()/2) + ')';
})
.call(yGridAxis);
I just started using d3.js yesterday and i have some trouble getting my stuff done.
For now I created a chart with two y axes, each showing some values and an x axis showing dates.
On click on the values on the y axes, I display the corresponding horizontal grid lines.
My problem is, that when zooming in or out, or dragging, the gridlines (horizontal and vertical) don't scale correctly with the axes values, they just don't move at all.
I searched a lot this afternoon and found some examples how to do it, but none of them seem to work with the code i already have.
I presume, that the logic should be added to the zoom behavior but i'm not sure
// x axis gridlines
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(5)
}
// add the X gridlines
let xGrid = svg.append("g")
.attr('class', 'grid')
.attr("id", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
)
//zoom behavior
function zoomed() {
.. some behavior ..
//redraw gridlines here?
.. some behavior ..
}
Please see this fiddle for the whole thing.
I called the second y axis (right) zAxis even if it's not a z axis.
Help would really be greatly appreciated.
The axes are working when you zoom. That's because, in the function zoomed() you are updating the scales.
So in order to make the grids zoom, you just need to update its scales too. Put this code inside the function zoomed() and it should work.
xGrid.call(
d3.axisBottom(x)
.scale(d3.event.transform.rescaleX(x))
.ticks(5)
.tickSize(-height)
.tickFormat("")
)
Now you just need to replicate this scale update to all other grids. Sorry that I couldn't give you a complete answer, but I don't have much time right now.
Now, in my opinion, you should not have the function make_gridlines() because it is really simple, and when you're working on lots of updates on different places it confuses me.
So, instead of calling make_gridlines() you call d3.axisBottom(x).ticks(5).
(Note that I'm new to d3 and js, so I'm recommending this based on my little experience and knowledge)
If I have the following chart, how do I make x-axis a logarithmic scale?
https://jsfiddle.net/1p4wm84m/14/
[x = d3.scale.linear().range([0, w])]
If I change the above code to log(), the x-axis doesn't render correctly.
[x = d3.scale.log().range([0, w])]
Any tips or advice would be appreciated.
How to configure the no of ticks on nvd3 line chart axis.
I know that we can have no of tick count on d3 chart using following
var axis = d3.svg.axis().ticks([NO_of_Tick]).scale(widthscale);
How this can be done for nvd3 line chart.
If you want to show all your xAxis tick values by default try using :
nv.models.multiBarChart().reduceXTicks(false);
Or if you want to show only certain tick values on your xAxis you could try this:
// Assuming your xAxis has 1-10
chart.xAxis.tickValues([1,2,3,4,5,6,7,8,9,10])
Hope it helps.
I want to display custom text as y axis label.
I have attached the sample screenshot.
Have you tried something like this?
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});
yAxis.render();