We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Not able to customize chart with Typescript code

Thread ID:

Created:

Updated:

Platform:

Replies:

130219 Apr 28,2017 09:29 AM May 1,2017 02:31 AM Angular 1
loading
Tags: ejChart
Selvaraj
Asked On April 28, 2017 09:29 AM

Hi,
     I am not able to customize syncfusion chart in Typescript code. It was working earlier. I am using typescript version 2.2.0. My code is below,

$("#perfTrndChart").ejChart({

            series: [{
              dataSource: this.chartData,
              xName: this.xAxisDataName,
              yName: this.yAxisDataName,
              fill: this.chartSeriesColor,
              type: 'line',
              marker: {
                shape: 'circle',
                visible: "true",
                border:
                {
                  color: "green"
                }
              },
              tooltip:
              {
                visible: true,
                format: " #series.name#  <br/>Date Time : #point.x# <br/> Value : #point.y# ",
                fill: "red"
              }
            }]
});


Is it because of typescript version? Its working if I declare this customization in html itself. For eg, declaring series type in 
     <e-series name="Trend Data" [dataSource]="chartData" xName="dateX" yName="valueY" type="line" ></e-series>

Please help me out.

Note:
In attached image, you can see that, I have formatted my tooltip in typescript code. but its not shown in UI.

Attachment: Syncfusion_chart_issue_2832404.zip

Dharanidharan Dharmasivam [Syncfusion]
Replied On May 1, 2017 02:31 AM

Hi Selvaraj, 

Thanks for contacting Syncfusion support. 

We have analyzed your query with the provided code snippet and screenshot. We have prepared a sample and ensured with typescript version which you have mentioned. But unfortunately, we were not able to replicate your scenario. The tooltip is customized as specified in format of tooltip property. Find the code snippet below. 

Angular 2: 

<ej-chart> 
    <e-seriescollection> 
       <e-series tooltip.visible="true" tooltip.format="#series.name#  <br/>Date Time : #point.x# <br/> Value : #point.y# "> 
        </e-series> 
    </e-seriescollection> 
</ej-chart> 


Screenshot: 
 
 
Since you have provided code snippet in javascript, we have also attahced the sample in javascript. Find the sample with the below link. 
 
Since we were not able to replicate your scenario, we would like to know the following details, which will be helpful in further analysis and provide you the solution sooner. 
 
·       Kinldy modify the attched sample or provide your project with replication steps. 
·       Browser with version in which the issue is reproduced. 
·       Essential studio version which you were using. 
 
Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;