Line chart customization (Axis lables, Axis Title, Gridlines and Line )

[Jawahar Rajan]

Hello
using Syncfusion charts in Angular - line chart.

1.  I would like to style the Axis labels and the data points on the axis
   
2. the Line in the line chart can the line be styled ? (the green line can I set the width 
   
3. Horizontal grid lines can I make these thinner
4. The label format x- axis for example below is yMMM can we have to MMMy  so Dec2011 instead
   
5. can we format the dollar $ sign in front of the y-axis value ?

currently, we have this:

  public primaryXAxis: Object = {

    valueType: 'DateTime',

    labelFormat: 'yMMM',

    intervalType: 'Months',

    edgeLabelPlacement: 'Shift',

    majorGridLines: { width: 0 },

    titleStyle: {

      color: 'white',

    },

    title: "Month"

  };

  //Initializing Primary Y Axis

  public primaryYAxis: Object = {

    rangePadding: 'None',

    minimum: 21,

    maximum: 31,

    interval: 1,

    lineStyle: { width: 0 },

    labelFormat: '${value}',

    majorGridLines: { width: 1 },

    titleStyle: {

      color: 'white',

    },

    title: "Price Per Share"

  };

[Durga Gopalakrishnan]

Hi Jawahar,

Greetings from Syncfusion. 

# 1 : I would like to style the Axis labels

You can use labelStyle property to customize the axis label font.

UG : https://ej2.syncfusion.com/angular/documentation/chart/axis-labels/#labels-customization

# 2 : the Line in the line chart can the line be styled ?

Using chart series fill property, you can change the color of series and using width, you can customize the width of line.

# 3 : Horizontal grid lines can I make these thinner

You can customize the width of gridlines using majorGridLines width property.

UG : https://ej2.syncfusion.com/angular/documentation/chart/axis-customization/#grid-lines-customization

# 4 : The label format x- axis for example below is yMMM can we have to MMMy  so Dec2011 instead

We suggest you to specify primaryXAxis labelFormat as 'MMMy' to display axis labels in required format.

# 5 : can we format the dollar $ sign in front of the y-axis value ?

For this, you can specify primaryYAxis labelFormat as '${value}' to achieve your requirement.

We have prepared sample based on your requirement. Please check with below screenshot and sample.

Sample : https://stackblitz.com/edit/angular-k1wfmq

Please revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Jawahar Rajan]

Thanks for your suggestions and demo sample
IS there a default FontFamily if the one we specify is not available ?
Does it default to Segoe UI ?


Thanks

[Durga Gopalakrishnan]

Hi Jawahar,

Most welcome. The default fontFamily is Segoe UI. We request you to specify the supported fontFamily to apply the required font for chart. Some of font families are not supported in chart, in that case, it will consider default font family. 

Please revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Jawahar Rajan]

thanks, Durga, for your help - appreciate it very much

[Durga Gopalakrishnan]

Hi Jawahar,

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.

Regards,

Durga Gopalakrishnan.

[Jawahar Rajan]

Actually I had another question.
The X-axis line itself (NOT the Major Grid Lines) how can that line width be set 
When I inspect it I see the there is a property stroke-width, which if i change in developer tools I get the effect i want.
How to set the stroke width in code?

[Durga Gopalakrishnan]

Hi Jawahar,

We suggest you to specify the lineStyle width for axis to achieve your requirement. Please check with the below snippet and sample.

public primaryXAxis: Object = {

        lineStyle:{width: 3 }

   };

Sample : https://stackblitz.com/edit/angular-k1wfmq-qvshdq

API : https://ej2.syncfusion.com/angular/documentation/api/chart/axisLineModel/#width

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.