score:35
the best way i have found to handle this is to perform the rotation of the x-axis tick labels yourself. why? because nvd3 is not handling the rotation and associated translations properly. look at your image, and you'll see that the library allows the rotation to translate the labels out from directly under the columns they represent. it also begins to mishandle the axis.tickpadding()
values, and so on.
the first thing that you need to do is to ensure that the chart has enough space for the translated labels, like so:
chart.margin({bottom: 60});
we can then translate and rotate the labels:
var xticks = d3.select('.nv-x.nv-axis > g').selectall('g');
xticks
.selectall('text')
.attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;
the labels now look like this:
score:0
whatever you text rotation is give start/middle/end
d3.select('.nv-x.nv-axis > g > g').selectall('g.tick text').style('text-anchor', 'start'); //start/middle/end
score:0
there is a css alternative.
.nv-x .tick text {
transform: rotate(-90deg) translatex(-15px) translatey(-7px);
}
score:1
this worked for me. the main reason i'm submitting this is that changing the anchor is nicer than translating the position manually.
var xticks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectall('g').selectall('text');
xticks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ;
xticks.attr('text-anchor',function() {
var anchor;
if(angle > 0){ anchor = 'start'; }
else if(angle < 0){ anchor = 'end'; }
else { anchor = 'middle'; }
return anchor;
});
score:1
the following worked for me:
chart.axislist["xaxis"]["rotatelabels"]= -45
score:5
for multiple graph, your can add "'#' + containerid + ' svg " in the d3.select like below:
//rotate x-axis label
var xticks = d3.select('#' + containerid + ' svg .nv-x.nv-axis > g').selectall('g');
xticks
.selectall('text')
.attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });
anyways, thanks for @river answer.
Source: stackoverflow.com
Related Query
- How can I position rotated x-axis labels on column chart using nvd3?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- dimple.js How can I change the labels of a chart axis without changing the data?
- How to do wordwrap for chart labels using d3.js
- how to create labels for data in donut chart using d3.js
- How can I keep tick marks from repeating when I have a small number of dates on an nvd3 chart
- Using Javascript D3 library, how can I determine mouse position in data set of an area element on mousemove event?
- How to make the NVD3 discreteBarChart labels on the X axis to adapt to the width or to the number of labels?
- How to modify axis labels in d3 for a stacked bar chart when the axis labels are mapped as part of the scale's domain
- How would I import a single column CSV file into a pie chart using Javascript D3?
- d3.js, how can i create an axis with custom labels and customs ticks?
- How can I add axis labels to a sankey diagram in d3?
- D3.js v7 - How to make Y axis labels always show on screen for a scrollable chart
- How do I split labels for my donut chart to multiple lines using d3.js?
- How to add svg rectangles as background behind axis tick labels in d3js if ticks are inside chart
- How can I use D3.js "onClick" event with an nvd3 bar when zoomed in on chart data?
- How to position text labels on a Sunburst chart with d3.js
- How to skip x axis labels in d3.js chart dynamically to have always a pretty chart?
- how i can put more lines in Line Plus Bar Chart using nvd3.js?
- How Can I display dates on the x-axis using nvd3 line charts
- How can I use column values for SVG colors using JS/D3?
- d3.js How to draw line chart with vertical x axis labels
- Sortable bar chart with long x axis labels rotated
- How to limit animated axis labels position in d3?
- How to get Average from DOW of Date column using crossfilter to populate in bar chart
- NVD3 Cumulative Line Chart : How to set different back ground color for specific X axis
- How can I create a basic bar chart with unique counts on the y axis and a category on the x axis?
- How to center align text labels on bar chart using d3js
- NVD3 line chart - how can I add on-graph series labels?
- How do I update the y axis of the chart using D3 js
More Query from same tag
- d3.js - circle animation with a slider
- Gettin crossfilter.js error "too much recursion"
- How do you set periodic timers in d3.js?
- How to combine several jQuery mouseover functions into one reusable mouseover function
- Using an associative array as data for D3
- Updating and Transitioning Individual SVG Elements Within a Group in D3.js
- Plotting an empty interval for elasticsearch date histogram
- Issue with adding tooltip in D3 pie chart
- Directive taking same instance's scope
- Find next highest and next lowest number in a sequence
- D3js Tooltip on country MAP is not coming
- javascript d3 line graph with ordinal x axis
- Converting this Bokeh plot to JavaScript?
- Remove JS SCRIPT from MASTER page in child pages
- D3 - tick values aren't spaced evenly with domain and range
- Drawing multiple bars per date
- Using an ordinal scale ('d3.scale.ordinal') for the x-axis in a bar chart
- dc.js How to update yscale after a renderAll
- javascript / d3 - passing parameters to a function
- How to format the units to avoid decimal points?
- How to check checkbox property in d3.js?
- Changing the color of the objects of SVG in D3
- How to change the order of grouped bar chart in dimple?
- D3.js Multiple Line Chart
- Treemap highlighting child-nodes D3
- How to add an event listener to entire window except for a defined donut (or annulus)
- DimpleJS legend limited to part of the series
- Graying out an image in D3js
- Transition both circles and text (within g element) in single general update pattern
- d3 transitioning from bar to pie and back