KendoUI Line Graph for Angular not displaying X Axis

0
votes

I want to use KendoUI Line Graph for Angular which is not displaying X Axis Label. I tried editing the existing example where the code is as follows:

 k-series="[
                             { field: 'nuclear', name: 'Nuclear electricity' },
                             { field: 'hydro', name: 'Hydro electricity' },
                             { field: 'wind', name: 'Wind electricity' }
                         ]

I tries changing the code as shown in some other angular chart example by KendoUI as

k-series="[{ xField: 'price', yField: 'performance' }]" k-x-axis="{ max: 1000, labels: { format: '${0}' }, title: { text: 'Price' } }" k-y-axis="{ min: 80, labels: { format: '{0}%' }, title: { text: 'Performance Ratio' }

But it seems if your chart type is line, it doesn't recognizes k-x-axis and k-y-axis .

k-series-defaults="{ type: 'line'}"

Please provide help as how I can show x-axis values: Link to their Angular Line Chart is as follows:

To see the information about this chart, please see http://demos.telerik.com/kendo-ui/line-charts/angular For Editing : http://dojo.telerik.com/iVOxo

1
angularjskendo-uilinechart

1 Answers

0
votes

Scatter charts, such as scatterLine use the axes configured in xAxis and yAxis. Arrays are accepted when defining multiple axes.

In your example the series type is set to line. This series type uses the categoryAxis and valueAxis. Therefore the axis configuration, as it is, will be ignored.

You should remove the field: '...' bindings and change the series type to scatterLine

k-series-defaults="{ type: 'scatterLine'}"

I hope this helps.