Kendo charts show dates in dd / MM / yyyy on y-axis
I am working on angular js application and am implementing kendo chart where I want to show dates in dd/MM/yyyy
y-axis in kendo chart as shown below, I have not found a solution yet. Please provide me with sample code or plunker link for this
Below is a sample code
HTML page
<div kendo-chart
k-legend="{ position: 'top' }"
k-series-defaults="model.graphSettings"
k-series="[
{ field: 'value', name: 'Budget BaseLine' },
{ field: 'value1', name: 'Budget Real' }]"
k-data-source="model.chartDataSource1"
k-category-axis="{labels:{rotation:-45}, title:{text: 'Budget Type'}}"
k-value-axis="{title:{text:'Date'}}"
k-rebind="model.chartDataSource1"
k-tooltip="{visible: true, template: '#= category #: #= value#'}"
style="height: 300px;">
</div>
angular js Controller
scope.model.graphSettings = {
type: 'column'
};
var obj = [];
obj.push({
category: "Category 1",
value: new Date(),
value1: new Date(),
}, {
category: "Category 2",
value: new Date(),
value1: new Date(),
})
scope.model.chartDataSource1 = new kendo.data.DataSource({
data: obj
});
source to share
It's a little strange that you have dates on the Y-axis - usually dates on the X-axis.
To achieve what you showed in the image, you need to add labels
a template definition section to the valueAxis
chart widget options . Here's an example:
<div kendo-chart
k-legend="{ position: 'top' }"
k-series-defaults="model.graphSettings"
k-series="[{ field: 'value', name: 'Budget BaseLine' },
{ field: 'value1', name: 'Budget Real' }]"
k-data-source="model.chartDataSource1"
k-category-axis="{labels:{rotation:-45}, title:{text: 'Budget Type'}}"
k-value-axis="{title:{text:'Date'}, labels: {template: '#= kendo.toString(new Date(value),\'dd/MM/yyyy\') #'}}"
k-rebind="model.chartDataSource1"
k-tooltip="{visible: true, template: '#= category #: #= value#'}"
style="height: 300px;">
</div>
This assumes your dates are in a format that can be parsed by a JavaScript date parser, as described here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse
source to share