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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Adding Markers

Thread ID:

Created:

Updated:

Platform:

Replies:

127155 Oct 29,2016 01:50 PM UTC Nov 2,2016 11:29 AM UTC Angular 2
loading
Tags: ejChart
brian seim
Asked On October 29, 2016 01:50 PM UTC

I was trying to add markers to a chart like this:

<ej-chart id="container" style="display:block;" (load)="onchartload($event)" title.text="Account Ratings" [isResponsive]="true"
  size.height="600" chartArea.border.width="1" primaryXAxis.rangePadding="Additional" primaryXAxis.labelRotation="45" primaryXAxis.title.text="Rating Date"
  primaryYAxis.title.text="Self Rating" [commonSeriesOptions.tooltip.visible]="true" [legend.visible]="true" size.width="1000px">
  <e-seriescollection>
    <e-series type="line" name="one"
marker.visible="true" marker.shape="Triangle" marker.size.width="10" marker.size.height="10" enableAnimation="true" xName="RateDate" [dataSource]="chartData" yName="Rating" fill="#69D2E7" tooltip.visible="true"
      tooltip.format="#point.x# : #point.y#<br/>">
    </e-series>
  </e-seriescollection>
</ej-chart>

But they didn't appear.

brian seim
Replied On October 29, 2016 02:22 PM UTC

This seems to work to make them appear:

<ej-chart id="container" style="display:block;" (load)="onchartload($event)"
  title.text="Account Ratings" [isResponsive]="true" size.height="600" chartArea.border.width="1"
  primaryXAxis.rangePadding="Additional" primaryXAxis.labelRotation="45" primaryXAxis.title.text="Rating Date"
  primaryYAxis.title.text="Self Rating"
  [commonSeriesOptions.tooltip.visible]="true"
  [commonSeriesOptions.marker.visible]="true" 
  [legend.visible]="true"
  size.width="1000px">
  <e-seriescollection>
    <e-series type="spline" name="one" enableAnimation="true" xName="RateDate" [dataSource]="chartData" yName="Rating" fill="#69D2E7" tooltip.visible="true"
      tooltip.format="#point.x# : #point.y# <br/>">
    </e-series>
    <e-series type="spline" name="two" enableAnimation="true" xName="RateDate" [dataSource]="chartData2" yName="Rating" fill="red" tooltip.visible="true"
      tooltip.format="#point.x# : #point.y# <br/>">
    </e-series>
  </e-seriescollection>
</ej-chart>

But I can't adjust the size from here.

Anandaraj T [Syncfusion]
Replied On November 2, 2016 11:29 AM UTC

Hi Brian, 

Thanks for using Syncfusion products. 

We have confirmed that the reported issue is a defect and it will be fixed in our next Service Pack release (Essential Studio 2016 volume 4 Service Pack 1) which is expected to be rolled out by the end of December 2016. 

As a workaround solution, we can use any of the following two methods to change the marker size. We have also prepared a simple sample for changing marker size and it can be downloaded from the following link 

Method-1: Using commonSeriesOptions in template (app.component.html file in above sample) 
 
We can assign an object to [commonSeriesOptions.marker.size] in template as shown in the following code snippet 
 
[angular2 template] 
 
<ej-chart id="container" style="display:block;" title.text="Sales Analysis" [isResponsive]="true" 
  size.height="600" chartArea.border.width="1" primaryXAxis.rangePadding="Additional" primaryXAxis.labelRotation="45" primaryXAxis.title.text="Days" 
  primaryYAxis.title.text="Sales in Millions" [legend.visible]="false" size.width="1000px" [commonSeriesOptions.marker.visible]="true" [commonSeriesOptions.marker.size]="{ width: 10, height:10 }">   
</ej-chart> 
 

Note: This method will modify marker size for all the series in Chart 

Method-2: Customizing series collection through component (app.component.ts file in above sample) 

We can customize the series collection in template through component. This method allows us to set marker size for individual series as shown in the following code snippet 

[component] 
 
export class ChartComponent { 
                series:any; 
     
                constructor() {         
                                 
                                //Add series collection in typescript instead of templates 
                                this.series = [{ 
                                                marker: { visible: true, 
                                                 
                                                                //Customize the size of marker 
                                                                size: { width: 10, height: 10 }  
                                                }, 
                                                points: [{x:"Mon", y:20}, {x:"Tue", y:30}, {x:"Wed", y:25}, {x:"Thu", y:32}, {x:"Fri", y:23}] 
                                }];                            
                 } 

[angular2 template] 
 
<ej-chart id="container" style="display:block;" title.text="Sales Analysis" [isResponsive]="true" 
  size.height="600" chartArea.border.width="1" primaryXAxis.rangePadding="Additional" primaryXAxis.labelRotation="45" primaryXAxis.title.text="Days" 
  primaryYAxis.title.text="Sales in Millions" [legend.visible]="false" size.width="1000px" [series]="series">   
</ej-chart> 

Please let us know if you have any concern. 

Regards, 
Anand

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.

Warning Icon 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.Close Icon

;