Search code examples
chartsscatter-plotscatterbaiduecharts

Formatter function to add labels in scatter graph in echarts by baidu


I am implementing a scatterplot using echarts library by baidu. I am referring to this example. I have made modifications in its properties according to my requirement. I have increased the bubble size by mentioning a symbol size in 'series' like this:

    series : [
                {    
                  symbolSize : 20,
                  type :'scatter',
                  data : [ some coordinate values ],
                  .
                  .   //rest of the properties
                  .

                  },
              ]

I have done this to include customized labels inside the bubbles. For this, I have modified the 'itemStyle' in 'series' as follows:

itemStyle: {
                  normal: {
                            color:'blue', 
                            label:{
                            textStyle:{
                                        fontWeight:'bold',
                                        fontSize:15
                                        },
                           show:true,
                           position: 'inside',
                           formatter: function(value)
                            {
                                if (value=='[10][20]')
                                return 'some label'
                                else
                                return 'NA'
                            }
                        }
                }
          },

All the bubbles now have 'NA' written inside them. So, I realize I am not doing it correctly. I want to know what does the 'value' contain in the formatter function. Will I be able to check its equality with the coordinates in the data? Please help.

This is how the points look as of now: Scatterplot

PS: The value element in formatter function of label in series is always UNDEFINED


Solution

  • Found a way to resolve the above issue. The formatter function for label has the following parameters:

    a (series name), b (data name), c (value array), d(null)
    

    So, if for example, I need the names of the bubbles to be 'Node1', 'Node2', 'Node3' and so on, then I name my series as 'Node' and in the value array instead of just having xAxis and yAxis values, I add 3rd parameter as a sequence of numbers. This means data may appear as:

    data: [[10, 80, 1], [20, 70, 2], [50, 70, 3] ..and so on],
    

    Now, when I call the formatter function, I can have it as follows:

    formatter: function(a,b,c)
                                {
                                    return a+c[2]
                                 }
    

    Where a = Series name, b = Data name and c = Value array. We modify these 3 according to our need to customized the label inside the bubble. My output looks like this:

    Scatter or bubble graph