echarts
echarts copied to clipboard
Prevent markPoint labels overlapping
What problem does this feature solve?
For example, in the line chart below, left Y-axis labels are overlapping for Torsica and Mitzerland series
var option;
const dataset = [[150, 230, 224, 218, 135, 147, 260], [230, 160, 70, 135, 147, 140, 110], [145, 147, 260, 340, 290, 110, 115]];
const entity = ['Mangolia', 'Mitzerland','Torsica'];
const seriesList = [];
for (const index in dataset) {
const row = dataset[index];
seriesList.push({
type: 'line',
data: row,
name:entity[index],
labelLayout: {moveOverlap: 'shiftY'},
labelLine: {show: true},
endLabel: {
show: true,
formatter: '{a} = {c}'
},
markPoint: {
symbolSize: 0,
label: {
position: 'left',
formatter: (params)=> `${params.value} = ${params.data.coord[1]}`
},
data: [{coord: [0, row[0]], value: entity[index]}]
}
});
}
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
offset: -260
},
series: seriesList
};
What does the proposed API look like?
Label overlapping could be prevented with an equivalent of labelLayout: {moveOverlap: 'shiftY'} and labelLine: {show: true}.