Muhammad Tauseen Muhammad Tauseen - 4 months ago 24
AngularJS Question

Rotate Labels nvd3 line chart

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>

Answer

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