CODEWITHSUNDEEP
bar-chartspacingechartsx-axis
Shanizzle
Shanizzle

Reputation: 23

How to add space between xAxis line itself and the bottom edge of the bar on Apache Echarts

Here is a design pic for reference, note the 2px of space. The axisLine > lineStyle doesn't offer a padding property. Any suggestions? Chart design example

Upvotes: 2

Views: 1632

Answers (1)

Sergey Fedorov
Sergey Fedorov

Reputation: 4430

As I know this is not possible by default but you can try to simulate this option. Something like that:

enter image description here

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

var option = {
  tooltip: {},
  xAxis: [{
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisLine: {
      lineStyle: {
        width: 1,
        color: 'white',
        shadowColor: 'black',
        shadowOffsetY: 2
      }
    },
    axisLabel: {
      color: 'black'
    },
    axisTick: {
      lineStyle: {
        color: 'black'
      }
    }
  }],
  yAxis: [{
    type: 'value',
  }],
  series: [{
    type: 'bar',
    data: [1, 34, 12, 23, 43, 64, 45]
  }]
};

myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>

Upvotes: 2

Related Questions