How to fix X axis label (step) In line chart

Akshay Deshpande

Solved

Question

Hello Everyone ,

you can look fig 1 and fig 2 from that picture the graph look same for both but i want that graph label in only "dd" format of date i don't want to show month but if i used "dd" the label give 2.5,5,7.5 instead of 1,2,3 and so on i want that that graph as per the fig 1 (as 31 step ) but only in "dd" format of date

Kindly suggest if you have any solution.

datausagegraph.png

21 Sep 2020

Benjith Sam

MVP

Solution

Kilian Hekhuis wrote:

@Benjith: I think for this you can get away with using format instead of formatter with a function? Something like:

format: {value:%e}

(per this)?

Thank you @Kilian for mentioning the better approach

See this Sample - LineChartDemo

HigghCharsJSON Value

" xAxis: {
        type: 'datetime',
      title: {
        text: 'Date Range'        
      },
      labels: {
            format: '{value:%d}',
            rotation: 45,
            align: 'left'
        }
}"

Regards,

Benjith Sam

See solution in context

21 Sep 2020

Kilian Hekhuis

MVP

Hi Akshay,

You need the Label to be a Date, because the Platform can dan instruct Highcharts (the underlying component) to use a date/time axis, instead of a discrete one. In order to format the labels, check the Highcharts documentation. One thing to look out for is the xAxis.labels.format, or for more complex stuff the formatter, which allows you to control the formatting in detail.

Add these options to the AdvancedFormat property of the chart, using the XAxisJSON parameter of AdvanceFormat_Init.

21 Sep 2020

1 reply

21 Sep 2020

Show thread

Hide thread

Akshay Deshpande

Kilian Hekhuis wrote: hi killan hekhuis ,

thank you for your quick response but i am unable to find the proper output with this solution

Hi Akshay,

Add these options to the AdvancedFormat property of the chart, using the XAxisJSON parameter of AdvanceFormat_Init.

21 Sep 2020

Benjith Sam

MVP

Hi Akshay,

As per the mentioned requirement, you will have to set the LineChart widget, HigghCharsJSON property with the below mentioned xAxis Object definition

" xAxis: {
        type: 'datetime',
      title: {
        text: 'Date Range'        
      },
      labels: {
        formatter: function() {
          return Highcharts.dateFormat('%e', this.value);
        }
      }
    }"

See this Sample - LineChartDemo

Hope this helps you!

Regards,

Benjith Sam

ReactiveLineChart.oml

21 Sep 2020

Kilian Hekhuis

MVP

@Benjith: I think for this you can get away with using format instead of formatter with a function? Something like:

format: {value:%e}

(per this)?

21 Sep 2020

3 replies

Last reply 22 Sep 2020

Show thread

Hide thread

Benjith Sam

MVP

Solution

Kilian Hekhuis wrote:

@Benjith: I think for this you can get away with using format instead of formatter with a function? Something like:

format: {value:%e}

(per this)?

Thank you @Kilian for mentioning the better approach

See this Sample - LineChartDemo

HigghCharsJSON Value

" xAxis: {
        type: 'datetime',
      title: {
        text: 'Date Range'        
      },
      labels: {
            format: '{value:%d}',
            rotation: 45,
            align: 'left'
        }
}"

Regards,

Benjith Sam

21 Sep 2020

Akshay Deshpande

Benjith Sam wrote:

Kilian Hekhuis wrote:

@Benjith: I think for this you can get away with using format instead of formatter with a function? Something like:

format: {value:%e}

(per this)?

Thank you @Kilian for mentioning the better approach

See this Sample - LineChartDemo

HigghCharsJSON Value

" xAxis: {
        type: 'datetime',
      title: {
        text: 'Date Range'        
      },
      labels: {
            format: '{value:%d}',
            rotation: 45,
            align: 'left'
        }
}"

Regards,

Benjith Sam

Thank you for your quick response but still i m not get the proper output for this .. i applied that to high charsjson but got that output which is not completed my requirement

21 Sep 2020

Akshay Deshpande

Akshay Deshpande wrote:hi Benjith sam,

sorry that was my mistake i put type to date instead of datetime , so that why i got incorrect graph

for now it is full fill my requirement.

Benjith Sam wrote:

Kilian Hekhuis wrote:

@Benjith: I think for this you can get away with using format instead of formatter with a function? Something like:

format: {value:%e}

(per this)?

Thank you @Kilian for mentioning the better approach

See this Sample - LineChartDemo

HigghCharsJSON Value

" xAxis: {
        type: 'datetime',
      title: {
        text: 'Date Range'        
      },
      labels: {
            format: '{value:%d}',
            rotation: 45,
            align: 'left'
        }
}"

Regards,

Benjith Sam

Thank you for your quick response but still i m not get the proper output for this .. i applied that to high charsjson but got that output which is not completed my requirement

22 Sep 2020

Kilian Hekhuis

MVP

Hi Akshay,

Please share your module so we can take a look what you did.

21 Sep 2020

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines