Require guidance for applying User Interaction for Graphs

[Dana]

Instructions are unclear in the documents. I apologize for any inconvenience this may cause, but may I have a step-by-step guidance for applying User Interaction (Tooltip and Zooming) for graphs? Thank you for helping me.

Currently using Angular 4.3.6.

[Bhuvanesh Valarman]

Hi Dana, 

Thanks for your update. 

As per your request, We have prepared a sample with User Interactions tooltip and zooming. 

To add tooltip and zooming in your sample refer below guide lines. 

 

1. Import TooltipService and ZoomService from chart package[‘@syncfusion/ej2-ng-charts’] and

           Inject into NgModule.providers [file://src/app/app.module.ts]. 

Code snippets: 

app.module.ts file code snippet. 

import { NgModule }      from '@angular/core'; 

import { BrowserModule } from '@angular/platform-browser'; 

// import the ChartModule for the Chart component 

import { ChartModule, LineSeriesService, TooltipService, ZoomService} from '@syncfusion/ej2-ng-charts'; 

import { AppComponent }  from './app.component'; 

 

@NgModule({ 

  // declaration of ej2-ng-charts module into NgModule 

  imports:      [ BrowserModule, ChartModule ], 

  declarations: [ AppComponent ], 

  bootstrap:    [ AppComponent ], 

  // Injecting the required services for the chart 

  providers: [LineSeriesService, TooltipService, ZoomService] 

}) 

export class AppModule { } 

 

2. Create an instance for tooltip and zoom options and set enable property to true. Now assign the instance to tooltip and zoomSettings property in the ‘ej-chart’ tag[file://src/app/app. component.ts].

 

app.component.ts file code snippet. 

import { Component, ViewEncapsulation } from '@angular/core'; 

import { TooltipSettingsModel, ZoomSettingsModel} from '@syncfusion/ej2-ng-charts'; 

@Component({ 

  selector: 'app-container', 

  // specifies the template string for the Charts component 

  template: 

  `<ej-chart id='chartcontainer' style="display: block;" [tooltip]='tootip' [zoomSettings]='zoom'> 

    <e-series-collection> 

        <e-series [dataSource]='data' fill="#E56590" type='Line' xName='x' yName='y'>  

        </e-series> 

    </e-series-collection> 

  </ej-chart>`, 

  encapsulation: ViewEncapsulation.None 

}) 

export class AppComponent { 

  public data: Object[] = [ 

    { x: 2005, y: 28 }, { x: 2006, y: 25 }, { x: 2007, y: 26 }, { x: 2008, y: 27 }, 

    { x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 } 

  ]; 

  public tootip: TooltipSettingsModel = { 

    enable: true, 

  }; 

  public zoom: ZoomSettingsModel = { 

    enableSelectionZooming: true 

  }; 

} 

 

We have attached the sample for your reference. Find the sample from the below link. 

Sample Link: link 

Steps to run the Sample  

Step  1 : Move to quickstart folder.  

Step 2 :  Run npm install  

Step 3 :  Run npm install @syncfusion/ej2-ng-charts --save  

Step 4 :  Run npm start  

Kindly revert us, if you have any concern. 

Thanks, 

Bhuvanesh V. 

[Dana]

It works. Thank you for the help.

[Bhuvanesh Valarman]

Hi Dana,

Thanks for the update. Kindly revert us, if you need any further assistance.

Thanks,
Bhuvanesh V.