Adding dynamic name values in Chart on hover

[sneha]

Hi Team,

I have column chart like below. how do i show the name dynamically from chart object

 

           

               

                       [dataSource]="chart.values"           

                       xName="geofence"

                       yName="count"

                       [name]="type"

                      >

               

           

           

 

 public chartData1 = [

    {

      values: [

        {

          geofence: 'Region2',

          type: 'Wifi',

          count: 6,

        },

        { geofence: 'Region1', type: 'Network', count: 6 },

      ],

    },

    {

      values: [

        {

          geofence: 'Region2',

          type: 'Wifi',

          count: 60,

        },

        { geofence: 'Region1', type: 'Network', count: 45 },

      ],

    },

  ];

[Srihari Muthukaruppan]

Hi Sneha, 

  

Thanks for contacting Syncfusion support. 

  

We regret to let you know that the name property is not directly bound to the chart datasource, instead it will accept the direct string values. Therefore, to show the names dynamically from the chart object, we used the “seriesRender” event of chart. We have prepared a sample for your reference where we have assigned the text field value from datasource argument within the seriesrender event. Please find the below sample, code snippet, and screenshot. 

  

Sample: https://stackblitz.com/edit/angular-3pt4hy?file=app.component.ts 

  

Code Snippet: 

app.component.html: 

  

<ejs-chart (seriesRender)='seriesRender($event)' > 

// add your additional code here 

</ejs-chart> 

app.component.ts:  

// add your additional code here
public seriesRender(args: ISeriesRenderEventArgs): void { 

      args.series.name = args.data[0].text; 

    }; 

   

  

Screenshot: 

 

  

Please let us know, if you need any further assistance on this. 

Regards,

Srihari M