Notification texts go here Contact Us Buy Now!

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

Unfortunately, there isn't any inbuilt support for having labels on both sides of a Y-axis. Here are two suggested workarounds:

**1. Use endLabel for the end and MarkPoint for the start**

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',
    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 = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: seriesList
};

**2. Use Custom Component**

You can also create a custom component to achieve this. Here's an example using the ECharts extension:

import * as echarts from 'echarts/core';

echarts.registerCoordinateSystem('dual-y-axis', {
  create: function (ecModel, api) {
    var dualYAxis = new DualYAxis(ecModel, api);
    ecModel.coordinateSystemManager.registerCoordinateSystem(dualYAxis);
    return dualYAxis;
  },
  dimensions: ['y', 'y2']
});

class DualYAxis {
  constructor(ecModel, api) {
    this._model = ecModel;
    this._api = api;

    this._yAxisModels = [];
    this._yAxisAxes = [];
  }

  // ... other methods

  getAxis(dim) {
    return this[`_axis${dim}`];
  }

  getAxes() {
    return this._yAxisAxes;
  }

  getMin() {
    return Math.min.apply(null, this._yAxisAxes.map(function (axis) { return axis.min; }));
  }

  getMax() {
    return Math.max.apply(null, this._yAxisAxes.map(function (axis) { return axis.max; }));
  }
}

This is just a starting point, and you may need to modify it to meet your specific requirements.

Please note that these workarounds may not be as straightforward as using a built-in option, but they should be able to help you achieve the desired result.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.