Mulitple Charts consistent x-axis display

[Rob ONeill]

Hi,

We have multiple Charts on a dashboard with datetimes as the x-axis. The way the charts seem to render the x-axis seems very inconsistent. Is there a way to say how many x-axis labels are wanted, and where the first label placement is. See attached image showing how the charts get displayed. Below is our code for the chart

                                <div ng-attr-id="{{chartTableData.id}}" set-chart-id-directive ng-if="hideChart()" ng-mouseenter="showLegend()" ng-mouseleave="hideLegend()" ng-click="hideLegend()"
                                     e-canresize="true"
                                     e-enablecanvasrendering="true"
                                     e-title-font-size="12px"
                                     ej-chart
                                     e-locale="locale"
                                     e-series="chartTableData.chartData.chartSeriesCollection"
                                     e-size-height="350px"
                                     e-size-width="100%"
                                     e-commonseriesoptions-datasource="dataSource"
                                     e-commonseriesoptions-xname="timestamp"
                                     e-commonseriesoptions-yname="value"
                                     e-commonseriesoptions-type="line"
                                     e-primaryxaxis-valuetype="datetime"
                                     e-primaryxaxis-labelformat="localeDateFormat"
                                     e-primaryxaxis-font-size="9px"
                                     e-primaryxaxis-labelintersectaction="hide"
                                     e-primaryxaxis-edgelabelplacement="hide"
                                     e-primaryyaxis-valuetype="double"
                                     e-primaryyaxis-font-size="9px"
                                     e-primaryyaxis-title-text="{{chartTableData.chartData.verticalAxisTitle}}"
                                     e-primaryyaxis-title-font-size="11px"
                                     e-legend-visible="false"
                                     e-annotations-content="chartSubTitle"
                                     e-chartareaboundscalculate="chartHasLoaded">

Cheers ... Rob.

Attachment: xaxis_lables_poor_f1b8eb.zip

[Deepaa Pragaasam]

Hi Rob,
Thanks for contacting Syncfusion Support.
We have analyzed your queries
Query1: Is there a way to show how many xaxis labels are wanted:
The maximumLabels property of axes can be used to control the number of labels displayed per 100 pixels.
To know more about the maximum labels property please refer the below link
http://help.syncfusion.com/js/chart/axis#maximum-number-of-labels-per-100-pixels
Query2: Where the first label placement is:
From your sample code provided we have found that you have binded the edgelabelplacement =”hide”. Hence the edge labels are hidden.
The first label placement can be controlled using the “edgeLabelPlacement” property.
The edgelabelPlacement supports hide, shift and none values.
To know more about the edge label placement please refer the below link
http://help.syncfusion.com/js/chart/axis#edge-labels-placement

We have created a JS playground sample containing the multiple charts with the maximum labels and edgelabelplacement property binded to xaxis to dynamically change the values
Sample Link:
http://jsplayground.syncfusion.com/2ds3rm21
Please let us know if you have any concerns.
Regards,
Deepaa.