How do you set tooltip labels for multiple series using Apache Echarts?

I’m trying to generate a line chart that uses date for the x-axis and two different y-axis. I have it mostly working, but I can’t get the tooltip to display the label properly for the second line.

To see this, go to the ECharts Demo Editor and enter the following code:

option = {
    xAxis: {
        type: 'time'
    },
    yAxis: [
        {
            type: 'value'
        },
        {
            type: 'value'
        }
    ],
    dataset: {
        source: [
            { date: '2020-01-24', orders: 4, sales: 250 },
            { date: '2020-01-25', orders: 3, sales: 250 },
            { date: '2020-01-26', orders: 2, sales: 375 },
            { date: '2020-01-27', orders: 2, sales: 380 },
            { date: '2020-01-28', orders: 4, sales: 325 },
            { date: '2020-01-29', orders: 5, sales: 375 },
            { date: '2020-01-30', orders: 6, sales: 500 },
            { date: '2020-01-31', orders: 4, sales: 425 },
            { date: '2020-02-01', orders: 2, sales: 280 },
            { date: '2020-02-03', orders: 3, sales: 580 },
            { date: '2020-02-04', orders: 4, sales: 250 },
            { date: '2020-02-05', orders: 4, sales: 350 }
        ]
    },
    series: [
        { 
            type: 'line',
            yAxisIndex: 0, 
            dimensions: [
                {
                    type: 'time',
                    name: 'date',
                    displayName: ''
                },
                {
                    type: 'float',
                    name: 'orders',
                    displayName: 'Orders'
                }
            ]
        },
        {
            type: 'line', 
            yAxisIndex: 1, 
            dimensions:[
                {
                    type: 'time',
                    name: 'date',
                    displayName: ''
                },
                {
                    type: 'int',
                    name: 'sales',
                    displayName: 'Sales'
                }
            ]
        }
    ],
    tooltip: {
        trigger: 'axis'
    }
};

As you can see, the lines render correctly, as do both y axes, but the label for the second series (green line) is empty rather than Sales. However, if I delete the first series from the array, Sales becomes the blue line and the label works correctly in the tooltip, so there seems to be something I’m missing when using multiple series.

I suspect the fix for this is quite simple and obvious, but I’ve spent a fair amount of time on it and haven’t had any luck. Any help would be greatly appreciated.

Answer

Give name to series instead of displayName to dimension.

series: [
    { 
        type: 'line',
        yAxisIndex: 0,
        name:'Orders', // Here
        dimensions: [
            {
                type: 'time',
                name: 'date'
            },
            {
                type: 'float',
                name: 'orders'
            }
        ]
    },
    {
        type: 'line', 
        yAxisIndex: 1, 
        name:'Sales', // Here
        dimensions:[
            {
                type: 'time',
                name: 'date'
            },
            {
                type: 'int',
                name: 'sales'
            }
        ]
    }
]