Chart height control

[vin]

The chart is displaying out of the DIV box, i used the sample chart from examples.

I am using a bootstrap card, i want to display the chart within the box
Also how to show legend?

Also need an example of PIE chart

I tried 3d chart, do i need to download anything?

<ej-chart id="chartcontainer" [enable3D]="true">
got this error
emplate parse errors:
Can't bind to 'enable3D' since it isn't a known property of 'ej-chart'.

My HTML

<div class="row ">

                    <div class="col-md-4 pl-1 pr-1"> div>

                    <div class="col-md-4 pl-1 pr-1">

                        <div class="card shadow p-3 mb-5 bg-white rounded no-mg ht-in">

                            <div class="card-body ">

                            <ejs-chart id="chart-container" [primaryXAxis]='primaryXAxis'>

                                <e-series-collection>

                                    <e-series [dataSource]='chartData' type='Line' xName='month' yName='sales' name='Sales'>e-series>

                                e-series-collection>

                            ejs-chart>

                            div>

                            

                        div>

                    div>

                    <div class="col-md-4 pl-1 pr-1">

                        <div class="card shadow p-3 mb-5 bg-white rounded no-mg ht-in">zdiv>

                    div>

                div>

[Srihari Muthukaruppan]

Hi vin, 

  

Please find the response for the chart related queries. 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

Query #1: I am using a bootstrap card, i want to display the chart within the box? 

  

We have analyzed your query. From that, we would like to let you know that the chart is responsive with respect to the width and height of its parent element, if its zero, then it will render with its default size(600 * 450). Hence we suggest you use the below workaround solution to achieve your requirement. In that, we have modified the style of the chart and its parent element to achieve your requirements. Based on your requirement we have also prepared a sample for reference. Please find below the code snippet and sample and screenshot. 

  

Sample: https://stackblitz.com/edit/angular-hymmpz?file=app.component.html 

  

Code Snippet: 

  

// Add your additional code here 

<div class="card-body" style="height: 300px"> 

<ejs-chart align="Center" id="chart-container" style="height: inherit !important"> 

// Add your additional code here 

</ejs-chart> 

</div> 

  

// Add your additional code here 

  

Screenshot: 

 

  

  

Query #2: Also how to show legend? 

  

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by using name property in the series of the chart or by using legendSettings property in the chart. We have also prepared a sample for your reference. Please find the below sample and code snippet. 

  

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

  

Code Snippet: 

 app.component.html: 

  

  // add your additional code here  

<ejs-chart align="Center" id="chart-container" width='50%' [legendSettings]="legendSettings"> 

<e-series-collection> 

<e-series [dataSource]='data1' type='Line' xName='x' yName='y' name='Sales'></e-series> 

</e-series-collection> 

</ejs-chart> 

  // add your additional code here 

  

app.component.ts: 

  

// add your additional code here 

public legendSettings: Object = { 

        visible: true, 

    }; 

  

  

Query #3: Also need an example of a PIE chart 

  

We have analyzed your query. Based on your requirement we have prepared a sample for your reference. Please find the below sample, code snippet, and screenshot for your reference. 

  

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

  

Code Snippet: 

<ejs-accumulationchart id="container" #pie style='display:block;  width: 92%' [legendSettings]="legendSettings" [tooltip]="tooltip" [title]="title" (load)='load($event)' [enableAnimation]= 'enableAnimation' [center]='center'> 

            <e-accumulation-series-collection>       

                  // add your additional code here 

            </e-accumulation-series-collection> 

        </ejs-accumulationchart> 

   

  

Screenshot: 

 

Query #4: I tried 3d chart, do i need to download anything? 

  

We have analyzed your query. From that we would like to let you know that as of now we don’t have support to “3D chart support in EJ2”. we have already logged a feature request on this. Since we have planned the implementation of features for this year we will include this feature on our 2021 volume 1 release. It can be tracked through our feedback portal below. 

  

Feedback Portal: https://www.syncfusion.com/feedback/11578 

  

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal. 

  

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  

Let us know if you have any concerns. 

  

Regards, 

Srihari M 

[vin]

Thanks

I see the chart but i dont see the data when i use the same code from example!!

Do i have to use chart-data.service.ts and financial-data.ts? if they are used, where are they used?

[Srihari Muthukaruppan]

  

Hi vin,

We have analyzed your query. From that, we would like to let you know that we can achieve your requirement by using datalabel property in the series of the chart.  We also suspect the reported scenario might occurs when datalabel service is not injected properly. Hence we suggest you to inject DataLabelService or AccumulationChartAllModule in app.module.ts file to overcome the reported scenario. Based on your requirement we have also prepared a sample for reference. Please find below the code snippet and sample. 

  

Sample: https://stackblitz.com/edit/angular-ugtu7p?file=app%2Fapp.module.ts 

  

Code Snippet: 

app.module.ts: 

 

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

// add your additional code here 
 

 

@NgModule({ 

 declarations: [ AppComponent ],

 imports: [ BrowserModule, AccumulationChartAllModule],

 providers: [],

 bootstrap: [AppComponent]

})

// add your additional code here 

 

app.component.html: 

 

<ejs-accumulationchart id="container" #pie> 

            <e-accumulation-series-collection>       

                  <e-accumulation-series name='Browser' [dataSource]='data' xName='x' yName='y'  [dataLabel]="dataLabel"  >
                </e-accumulation-series>

            </e-accumulation-series-collection> 

        </ejs-accumulationchart> 

 

app.component.ts: 

  

// add your additional code here  

 

public dataLabel: Object = {

        visible: true,

        position: 'Inside', name: 'text',

        font: {

            fontWeight: '600'

        }

    };

 

// add your additional code here             

  

     
 

 

  

Screenshot: 

 

  

Let us know if you have any concerns. 

  

Regards, 

Srihari M 

[vin]

YUP that helped Thanks!!

[Srihari Muthukaruppan]

Hi Vin,  

  

Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.   

   

Thanks,   

Srihari M