Adding Markers

[brian seim]

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]

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]

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 

http://www.syncfusion.com/downloads/support/forum/127155/ze/Marker-935647077 

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