Incubator-echarts: echarts option nameRotate not working

Created on 8 Aug 2017 · 3Comments · Source: apache/incubator-echarts

One-line summary [问题简述]

I am trying to rotate the labels on the xAxis so they are all visible.

Looking at the documentation i see there is an option to use the command nameRotate but it doesn't seem to work..?

tried to apply the syntax to the online demo and not working either....

Version & Environment [版本及环境]

ECharts version [ECharts 版本]: 3.6.2
Browser version [浏览器类型和版本]: edge, chrome
OS Version [操作系统类型和版本]: windows 10

Expected behaviour [期望结果]

labels in the bottom of chart (xAxis) rotating to vertical

ECharts option [ECharts配置项]

              var echartBar = echarts.init(document.getElementById('mainb'), theme);

              echartBar.setOption({
                title: {
                 //text: 'Graph title',
                 //subtext: 'Graph Sub-text'
                },
                tooltip: {
                  trigger: 'axis',
                  formatter: "{a} <br/>{b} : {c}%"

                },
                legend: {
                 // data: ['sales', 'purchases']
                },
                toolbox: {
                  show: false
                },
                calculable: true,
                xAxis: {
                  nameRotate: 90, //Rotation of labels - not working!!!!
                  type: 'category',
                  data: ['Client 1', 'Client2', 'Client3', 'Client4', 'Client5', 'Client6', 'Client7', 'Client8', 'Client9?', 'Client10', 'Client11', 'Client12'] //Clients go here
                },
                yAxis: [{
                  type: 'value'
                }],
                series: [{
                  name: 'Overall Progress',
                  type: 'bar',
                  data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                  markPoint: {
                    data: [{
                      type: 'max',
                      name: 'MAxim',
                                          formatter: "{a} <br/>{b} : {c}%"

                    }, {
                      type: 'min',
                      name: '???'
                    }]
                  },
                  markLine: {
                    data: [{
                      type: 'average',
                      name: 'Average'
                    }]
                  }

option = {

}

Other comments [其他信息]

Source

LMJS1974

Most helpful comment

xAxis.nameRotate is just used to set the xAxis name's rotate(usually display at the left or right of the axis) . You can set the xAxis.axisLabel.interval or xAxis.axisLabel.rotate to show all the axisLabel.