echarts bar lines to top

Question

If charts data has a small number of values they are position on center. It is possible to position top?

  xAxis: {
    type: 'value',
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia']
  },
  series: [
    {
      type: 'bar',
      data: [18203, 23489]
    }
  ]

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community, Dec 19 '22 at 21:29

score 2 · Answer 1 · answered Dec 21 '22 at 02:13

Your name stuck out to me! My son's name is Maxim, too. Either way, if I understand what you're asking correctly, you want to be able to push the bars to the top and leave empty space at the bottom of your plot. If I understood correctly, then the easiest method to accomplish this task is to add dummy data—blank content to force the bars into the direction you're looking for.

You could also specify the barGap, barWidth, and a few other parameters to control the size of the bars.

var chart = echarts.init(document.getElementById("main"));

var option = {
  xAxis: {
    type: 'value',
  },
  yAxis: {
    type: 'category',
    data: ['', '', 'Brazil', 'Indonesia']
  },
  series: [{
    type: 'bar',
    name: 'Pop',
    data: [ '', '', 18203, 23489,],
  }]
}
// All the above is applied to the chart
chart.setOption(option, true);

#main {
  margin-left: 50px; /* make space for the labels */ 
}

<head>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>
  <!--div container for the chart. this in the <body></body>-->
  <div id="main" style="width: 600px; height: 450px;"></div>
</body>

echarts bar lines to top

1 Answers1