In Spline Chart , how we can change y axis values to labels and X axis labels to value.

[Sourabh Brajesh Sharma]

I am facing one issue with Spline chart , in chart normally on Y axis the values are 0,2,4,6,8 and on X axis the labels are JAN , FEB , MAR , APR and so on .

But my Requirement is that on Y axis there should be Labels and on X Axis their should be values and chart should be worked as per Y axis . 

So Any one can Help me this Problem .

Code is : 

.ts file

 this.data = [

     {month: 'Jan', sales: 35}, {month: 'Feb', sales: 28},

     {month: 'Mar', sales: 34}, {month: 'Apr', sales: 32},

     {month: 'May', sales: 40}, {month: 'Jun', sales: 32},

     {month: 'Jul', sales: 35}, {month: 'Aug', sales: 55},

     {month: 'Sep', sales: 38}, {month: 'Oct', sales: 30},

     {month: 'Nov', sales: 25}, {month: 'Dec', sales: 32}

   ];

.html file

<ejs-chart [primaryYAxis]='yAxis' [primaryXAxis]='xAxis' [title]='chartTitle' [tooltip]='tooltipSettings'

        [legendSettings]='legend' style="z-index: 8; overflow: scroll;width: 50%;

        height: 100%; 

        resize: both;">

        <e-series-collection>

          <e-series [dataSource]='data' type='Spline' xName='month' yName='sales' name='Sales' [marker]='markerSettings'>

          </e-series>

        </e-series-collection>

      </ejs-chart>

[Durga Gopalakrishnan]

Hi Sourabh, 

Your requirement can be achieved by specifying isTransposed property as true. We have prepared sample based on your requirement. 

<ejs-chart isTransposed="true"></ejs-chart> 

 

Sample : https://stackblitz.com/edit/angular-drryg7-okbcsv 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[Sourabh Brajesh Sharma]

Thank You for your help . It helped me a lot. 

[Durga Gopalakrishnan]

Hi Sourabh, 

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you. 

Regards, 

Durga G 

[Sourabh Brajesh Sharma]

One Question Regarding Syncfusion Charts :

When in HighCharts we want to import All highcharts in component 

so we use : import * as Highcharts from 'highcharts';

and  to take input : @Input() chart: Highcharts.Chart; is used .

So in synchfusion can i get this type of approach?

 if yes than can you please send me code for syncfusion same as highcharts

[Durga Gopalakrishnan]

Hi Sourabh, 

You can import all modules the required for chart in app.module.ts file by following the below snippet. 

app.module.ts 

import { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'; 

@NgModule({ imports: [ ChartAllModule, RangeNavigatorAllModule,AccumulationChartAllModule] 

}) 

 

app.component.ts 

import {  ChartComponent } from '@syncfusion/ej2-angular-charts'; 

export class AppComponent { 

  @ViewChild('chart') 

  public chart: ChartComponent; 

} 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[Sourabh Brajesh Sharma]

Hello , 

I just want to know that for displaying Stacktotal value in Column stack Chart Tooltip , is there any built in function so that by which we can call and display in tool tip 

My Tooltip code :

'${series.name}: ${point.y}</br>Total : ${point.stackTotal}'

So from my knowledge point.stackTotal is used in highcharts so like that in syncfusion is there any function .

Please reply Fast so that i can implement .

[Durga Gopalakrishnan]

Hi Sourabh, 

We request you to use tooltipRender event to customize the tooltip text. We have stored stacked start and end values internally in series. We suggest you to assign those values in this event to display total values. We have prepared sample based on your requirement. 

public tooltipRender(args: ITooltipRenderEventArgs): void{ 

         args.text = args.text +"<br>" +  "Total : "+ args.series.stackedValues.endValues[args.point.index]; 

} 

 

Sample : https://stackblitz.com/edit/angular-51vzqt 

Kindly revert us if you have any concerns. 

Regards, 

Durga G 

[Sourabh Brajesh Sharma]

Hello Team ,

Thank you for reply .

This solution worked but i would like tell you that after running it is showing perfectly but it is giving error . Please Look Below Snippet:

I'm importing : imports{ITooltipRenderEventArgs } from '@syncfusion/ej2-angular-charts';

I want to use only this import not any other so please resolve this one.

So please tell me why it is giving me error , in project we can't use error code .

and one issue while hovering on stacks , the total value remains same like for first stack the total value is 425.1

so it should remains same when we hover on any stack .

In your code it is adding the stack when we hover over stacks . So please Fix Both the issues as soon as possible .

And Please Reply Fast .

Thank You for Your Support :)

[Durga Gopalakrishnan]

Hi Sourabh, 

We suggest you to store the last series stacked values in textRender event and access those values in tooltipRender event to display same total for all points. We have modified sample and attached for your reference. 

     public stackedValues : Array<any> =[]; 

     public tooltipRender(args: ITooltipRenderEventArgs): void{ 

         args["text"] = args["text"] +"<br>" +  "Total : "+ this.stackedValues[args["point"].index]; 

     }; 

     public textRender(args: ITextRenderEventArgs): void{ 

        this.stackedValues = args.series["stackedValues"].endValues; 

     }; 

 

Sample : https://stackblitz.com/edit/angular-51vzqt-a2aiwm 

Kindly revert us if you have any concerns. 

Regards, 

Durga G