CODEWITHSUNDEEP
javascriptecharts
north.inhale
north.inhale

Reputation: 511

echarts add padding between line chart and y-axis label

I use echarts plugin to build line chart at a some web pages. It works good but I can't find out inside documentation how to add padding between line chart and y-axis label and move y-axis label to the center between y-axis split lines?

Current line echarts plugin instance view:

Current line echarts plugin instance view

Expected line echarts plugin instance view:

Expected line echarts plugin instance view

The screenshot above mean that I mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines

Mentally shifted the graph away from the internal label so that they would not intersect and moved the labels along the y-axis of the game below exactly in the center between the split lines

What settings in the plugin do I need to change to achieve the same result as in the screenshot with the expected result?

Upvotes: 2

Views: 14129

Answers (2)

Sergey Fedorov
Sergey Fedorov

Reputation: 4450

var myChart = echarts.init(document.getElementById('main'));
    var seriesData = Array.from({length: 100}, () => Math.floor(Math.random() * 5000));
    var option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '10%',
        bottom: '15%',
      },
      xAxis: [{
        id: 'xAxis1',
        type: 'category',
        boundaryGap: false,
        data: Array.from({length: seriesData.length}, () => Math.floor(Math.random() * 100)),
        axisLine: {
          lineStyle: {
            shadowOffsetX: 60,
          },
        },
      }],
      yAxis: [{
        type: 'value',
        axisLine: { onZero: false },
        position: 'right',
        show: true,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0)',
          },
        },
        splitLine: {
          lineStyle: {
            shadowOffsetX: 60,
            shadowColor: '#ccc'
          }
        },
        axisLabel: {
          interval: 0,
          inside: true,
          margin: -45,
          fontSize: 16,
          padding: [-50, 0, 0, 0],
          color: 'black',
          showMinLabel: false,
          showMaxLabel: false,
        },
      },{
          type: 'value',
          position: 'right',
          show: true,
          offset: 59,
        }
      ],
  dataZoom: [{
    type: 'inside'
  }, {
    type: 'slider',
    show: true,
    bottom: 0
  }],
  series: [{
    id: 'series1',
    type: 'line',
    yAxisIndex: [0,1],
    lineStyle: {
      width: 1,
    },
    label: {},
    data: seriesData,
  }],
};

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

Upvotes: 1

Sergey Fedorov
Sergey Fedorov

Reputation: 4450

You can achieve this in the different ways, but most of the them are costly to support and harden to implement. It one of safety and ease way but you will need to keep an eye that xAxis have a little bit more points than series data to show gap.

var myChart = echarts.init(document.getElementById('main'));
var option = {
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '10%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  yAxis: {
    type: 'value',
    position: 'right',
    axisLabel: {
      inside: true,
      margin: 50,
      fontSize: 18
    }
  },
  series: [{
    type: 'line',
    areaStyle: {
      color: 'rgba(104, 216, 214, 0.4)'
    },
    lineStyle: {
      width: 2,
      color: 'rgba(104, 216, 214, 1)'
    },
    data: [120, 132, 101, 134, 90, 230, 210]
  }, ]
};

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

Upvotes: 3

Related Questions