Search code examples
javascriptvisualizationlinechartecharts

How to have line labels on both sides of a Y-axis?


I would like to have line labels on both sides of a Y-axis, as in the following example: enter image description here I looked on ECharts examples and documentation, but I couldn't find which series type or options would allow me to do that...

Here are the data used in the example:

|------------+--------+--------+--------+--------+-------+--------+--------+--------|
| Entity     | 1950.0 | 1960.0 | 1970.0 | 1980.0 |  1990 | Rank50 | Rank90 | Factor |
|------------+--------+--------+--------+--------+-------+--------+--------+--------|
| Mitzerland |  30000 |  32000 |  40000 |  50000 | 60000 |      1 |      3 |      2 |
| Ataly      |  20000 |  40200 |  60500 |  72000 | 85000 |      2 |      1 |    4.3 |
| Bangolia   |  10000 |  20100 |  30500 |  42000 | 75000 |      3 |      2 |    7.5 |
|------------+--------+--------+--------+--------+-------+--------+--------+--------|


Solution

  • I dont think there is inbuilt support for that. Best I can think of right now is to use the regular endLabel for the end of the series and a markPoint with symbolSize 0 on top of the first datapoint as start label.

    Example:

    const dataset = [[150, 230, 224, 218, 135, 147, 260], [230, 160, 70, 135, 147, 140, 110], [135, 147, 260, 340, 290, 110, 90]];
    const entity = ['Mangolia', 'Mitzerland','Torsica'];
    
    const seriesList = [];
    for (const index in dataset) {
      const row = dataset[index];
      seriesList.push({
        type: 'line',
        name: entity[index],
        data: row,
        endLabel: {
          show: true,
          formatter: () => 'end label = ' + row[row.length - 1]
        },
        markPoint: {
          symbolSize: 0,
          label: {position: 'left'},
          data: [{coord: [0, row[0]], value: entity[index]}]
        }
      });
    }
    
    option = {
      legend: {},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: seriesList
    };