Muhammad Tauseen
Muhammad Tauseen

Reputation: 113

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>

Upvotes: 0

Views: 443

Answers (1)

Sajeetharan
Sajeetharan

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

Related Questions