Adjust position of a line chart series label using echarts

Question

i have a angular web application with a line graph (using echarts) with multiple series. the labels of the series are overlapping, is there a way to adjust their position or size etc to prevent them from over lapping ?

my code:

 thisInstance._paidUnpaidSplitGraphOptions = {
      title: {
        text: 'Paid/Unpaid Claims'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['Unpaid Claims', 'Paid Claims']
      },
      grid: {
        left: '5%',
        right: '6%',
        bottom: '5%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {
            title: "Download Image of Chart"

          },
          dataZoom: {
            yAxisIndex: false,
            title: { "zoom": "Zoom Chart", "back": "Remove Zoom" }
          },
          brush: {
            type: ['lineX', 'clear'],
            title: {
              "lineX": "LineX", "clear": "Clear" }
          }
        }
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: xAxisData

        }
      ],
      yAxis: [
        {
          type: 'value'

        }
      ],
      series: [

        {
          name: 'Paid Claims',
          type: 'line',
          stack: 'WWWWWWWW',
          label: {
            position: 'TopLeft',
            normal: {

              show: true,
              formatter: function (data) {
                return thisInstance.GetFormattedValue(data);
              },
              color: '#151515'
            }
          },
          areaStyle: { normal: {} },
          data: paidAmounts
        },
        {
          name: 'Unpaid Claims',
          type: 'line',
          stack: 'WWWWWWWW',
          label: {
            normal: {
              show: true,
              formatter: function (data) {

                return thisInstance.GetFormattedValue(data);
              },
              position: 'BottomRight',
              color: '#151515'
            }

          },
          areaStyle: { normal: {} },
          data: unPaidAmounts

        }
      ]
    }

html code:

<div class="clr-row">
  <div class="clr-col-2">

  </div>
  <div class="clr-col-8">
    <div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"></div>
  </div>
  <div class="clr-col-2">
    <button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"><clr-icon shape="download"></clr-icon>LAG REPORT</button><br />
    <button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"><clr-icon shape="download"></clr-icon>AGE ANALYSIS REPORT</button>
  </div>
</div>

What i have tried so far is to change the position of the labels as you can see in the above code t making the one 'TopLeft' and the other 'BottomRight', but this didn't seem to help at all the labels are still overlapping.

below is a screenshot of what it looks like

Answer 1

To move text slightly you can use offset: [0,-15], reference.

However you might want to use the label formatter to mask the labels that are under a certain value.

Example

var data = [
    [820, 932, 901, 934, 1290, 330, 320],
    [0, 0, 0, 0, 0, 900, 1320]
];


var option = {
    xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {},
    itemStyle: {

    },
    series: [{
            data: data[0],
            type: "line",
            stack: "stack",
            color: 'blue',
            areaStyle: {
                color: 'blue',
                opacity: 0.3
            },
            label: {
                position: "top",
                offset: [0, -15],
                show: true,

            }
        },
        {
            data: data[1],
            type: "line",
            stack: "stack",
            areaStyle: {
                color: 'red',
                opacity: 0.3
            },
            label: {
                position: "top",
                show: true,
                formatter: function (params) {
                    return (params.value === 0) ? "" : params.value;
                }
            }
        }

    ]
}


var dom = document.getElementById("container");
var myChart = echarts.init(dom);
if (option && typeof option === "object") 
    myChart.setOption(option, true);

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
       <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 90%"></div>
</body>
</html>

Stacked line graph with masked labels

Answer 2

You should try avoidLabelOverlap = true