How to customize Echart series label text?
13,331
Please use the formatter property provided by the label object. You can return any type of string. Please use echarts link to study more:
label: {
show: true,
position: 'top',
color: "black",
fontSize: 12,
formatter: function(d) {
return d.name + d.data;
}
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
label: {
show: true,
position: 'top',
color: "black",
fontSize: 12,
formatter: function(d) {
return d.name + ' ' + d.data;
}
},
}]
};
myChart.setOption(option);
<div id="main" style="width: 600px;height:400px;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
Comments
-
ArunKumar almost 2 years
I need to show custom Series label instead of data array value. here my series data array is
data: [820, 932, 901, 934, 1290, 1330, 1320],
When i enable label :
label: { show: true, position: 'top', color: "black", fontSize:12, },
It show data array value top of my line chart i need to show custom text instead of this data array values
[text1,text2,text3...]My source code:
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', symbolSize: 12, label: { show: true, position: 'top', color: "black", fontSize:12, }, }] };
-
Jasdeep Singh about 4 yearscan you please create a jsfiddle for this ?
-