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();
Related
I am using the d3.svg.axis() function in order to draw the x axis of my barchart. As the labels on the axis can be very long, I need to cut them (to let's say four letters) and display the rest as tooltip. I would like to make use of svg:title, as the browser will take care of displaying the tooltip then.
Any idea how I can achieve this? How can I add a title element on each label on the x axis ticks?
Many Thanks!
Should be as simple as:
// tooltip
d3.selectAll('.x.axis>.tick') // gs for all ticks
.append('title') // append title with text
.text(function(d){
return d;
});
Example here.
I'm trying to display axis for a grid based chart (heat map) to display correctly. I can get them into the right alignment (centered with each grid whether it be row or column), but they are on top of the grid where I want to have them displayed outside of the grids.
Here's what I have so far: http://jsbin.com/hihepo/8
Provide some margins around and translate your chart's g wrapper. You have margins defined, but they are never used, so you chart stretches until svg element borders and there's no more space around.
Use .orient('left') for y axis and .orient('bottom') for x axis orientation. See docs for orient method.
Adjust the transform and text-anchor of your x axis labels (or change the translation of their g wrapper).
Here's a demo for x axis labels.
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'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
I am trying to disable the y value from being shown when the mouse hovers over a circle in nvd3 Bubble/Scatter chart. The live code is here. I tried this
var chart = nv.models.scatterChart()
.showDistY(false)
but it only makes the line to the y axis disappear and not the y axis value. How do I disable the y axis label from being shown when the mouse hovers over the circles/bubbles?
You can set the y tooltip content to null to achieve this:
var chart = nv.models.scatterChart()
.showDistY(false)
.tooltipYContent(null);