title: Adjust position of a line chart series label using echarts
body: <p>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 ?</p>
  
  <p>my code:</p>
  
  <pre><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
  
          }
        ]
      }
  </code></pre>
  
  <p>html code:</p>
  
  <pre><code>&lt;div class="clr-row"&gt;
    &lt;div class="clr-col-2"&gt;
  
    &lt;/div&gt;
    &lt;div class="clr-col-8"&gt;
      &lt;div echarts [options]="this._appService.GraphsService._paidUnpaidSplitGraphOptions" class="demo-chart"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="clr-col-2"&gt;
      &lt;button class="btn btn-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesLagReport()"&gt;&lt;clr-icon shape="download"&gt;&lt;/clr-icon&gt;LAG REPORT&lt;/button&gt;&lt;br /&gt;
      &lt;button class="btn btn-success-outline btn-sm" (click)="this._appService.ClaimCaptureService.GetHpCodesAgeReport()"&gt;&lt;clr-icon shape="download"&gt;&lt;/clr-icon&gt;AGE ANALYSIS REPORT&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>below is a screenshot of what it looks like 
  <a href="https://i.stack.imgur.com/RbLIw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RbLIw.png" alt="Graph screenshot"></a></p>