CODEWITHSUNDEEP
javascriptjqueryecharts
ArunKumar
ArunKumar

Reputation: 229

How to customize Echart series label text?

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,
    },
  }]
};

Upvotes: 6

Views: 36410

Answers (1)

Jasdeep Singh
Jasdeep Singh

Reputation: 8301

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>

Upvotes: 16

Related Questions