javascript - X-Axis Format in Kendo-UI -
i have started on telerik kendo. have put data display. x axis readable in current format. how format it?
<base href="http://demos.telerik.com/kendo-ui/line-charts/date-axis"> <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script> <body> <div id="example"> <div class="demo-section k-content"> <div id="chart"></div> </div> </div> </div> <script> var stats = [ { x: 0, y: 0 }, { x: -3.88770423666098, y: 945.987507963258 }, { x: -4.24922990437403, y: 985.985280150689 }, { x: -2.91182688405784, y: 1080.9534171457 }, { x: 1.90405053850085, y: 1175.79962223412 }, { x: 7.80045299498725, y: 1270.59074063256 }, ]; function createchart() { $("#chart").kendochart({ title: { text: "units sold" }, datasource: { data: stats }, series: [{ type: "line", field: "x", categoryfield: "y" }], }); } $(document).ready(createchart); $("#example").bind("kendo:skinchange", createchart); </script> </div> </body> here jsfiddle: http://jsfiddle.net/nds3s/23/
you use area chart , format labels suit needs:
function createchart() { $("#chart").kendochart({ title: { text: "units sold" }, datasource: { data: stats }, categoryaxis: { labels: { step: 10, format: "n2" }, }, series: [{ type: "area", line: { style: "smooth" }, field: "x", categoryfield: "y" }], }); } i had set type area, line type smooth, , labels skip 10 positions, , show two decimal digits.
i have updated fiddle
thanks.