CODEWITHSUNDEEP
javascriptchartsecharts
Firmansyah
Firmansyah

Reputation: 166

Why yAxis axisLabel align left is resulting position label inside the bar in Apache ECharts

The expetacion result is like this post: How to set labels align left in Horizontal Bar using chart.js? but it's implemented in Apache ECharts

Any idea?

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

var options = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {},
  xAxis: [{
    type: "value",
  }],
  yAxis: [{
    type: "category",
    axisLabel: {
      align: 'left',
      margin: 40
    },
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  }],
  series: [{
    name: "直接访问",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
};

myChart.setOption(options);
#main {
  height: 400px;
}
<div id="main"></div>
<p>Test</p>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>

Upvotes: 2

Views: 1461

Answers (1)

Vivek Kandhvar
Vivek Kandhvar

Reputation: 60

You can set margin for axisLabel, to make the labels visible. Updated your code snippet

Upvotes: 3

Related Questions