Reputation: 113
I want to rotate x-axis labels to 90 degree because they are overlapping each other. I have used rotateLabels but it isnt wotking
<nvd3-line-chart
data="singleLineChartData"
id="singleLineChart"
width="800"
height="200"
showXAxis="true"
showYAxis="true"
tooltips="true"
interactive="true"
rotateLabels="90"
useinteractiveguideline="true"
xAxisTickValues="xAxisTickValuesFunction()"
xAxisTickFormat="xAxisTickFormat()"
color="colorFunction()"
isArea="false"
margin="{left:50,top:50,bottom:50,right:50}"
showLegend="true"
legendColor="colorFunction()"
noData="No Data!">
<svg></svg>
</nvd3-line-chart>
Upvotes: 0
Views: 443
Reputation: 222582
You have to use 'xaxisrotatelabels'
instead of rotateLabels
<div ng-app='nvd3TestApp'>
<div ng-controller="ExampleCtrl">
<nvd3-line-chart
data="exampleData"
showXAxis="true"
showYAxis="true"
tooltips="true"
xaxisrotatelabels ="90"
interactive="true">
</nvd3-line-chart>
</div>
</div>
Working Application
Upvotes: 1