Formatting dates of category axis labels

1.2k views Asked by At

I have an array of objects which i am displaying as a line graph in kendo. The category axis is a date and is data between a large period of time. I want to display this date neatly (In the UK/ Rest of world date format). However i cannot seem to get this to work. Here is my HTML code below

<kendo-chart [transitions]="true">
    <kendo-chart-axis-defaults [majorGridLines]="{ visible : false}">
    </kendo-chart-axis-defaults>
    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item>
            <kendo-chart-category-axis-item-labels culture="en-GB"
                                                   format="d"
                                                   step="50">
            </kendo-chart-category-axis-item-labels>
        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <kendo-chart-value-axis>
        <kendo-chart-value-axis-item>
            <kendo-chart-value-axis-item-labels culture="en-GB"
                                                format="c">
            </kendo-chart-value-axis-item-labels>
        </kendo-chart-value-axis-item>
    </kendo-chart-value-axis>
    <kendo-chart-series>
        <kendo-chart-series-item type="line" [data]="items | async"
                                 field="cumulativePercentReturn"
                                 markers="markers"
                                 dashType="solid"
                                 categoryField="startDate">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

The dates, however, are still rendered as yyyy-mm-dd etc. The kendo for angular 2 guide is not very specific here, asking me to refer to a globalisation article which does not exist on the site.

If anyone could aid me in getting this working. I have tried editing that format string in every way i can sensibly think of.

1

There are 1 answers

0
Major On BEST ANSWER

So i solved this! It turned out the JSON data returned was showing the date formatted as a string. The date formatting worked when i cast this string back to a date.