how to categories series in kendo chart mvc?

Question

I have a chart,

Purpose of the chart will say total of male & female, based on the country & nationality wise. Successfully generate the chart

Here is the fiddle, i created.

jsFiddle example For the reference

How to categories the series label.

I am trying to position the series name similar like this.. Suggest me how can i generate

Sample Razor code tried

  @(Html.Kendo().Chart()
    .Name("chart")
    .Title("Gender Summay based on the total")
    .Legend(legend => legend
        .Position(ChartLegendPosition.Bottom)
    )
    .Series(series =>
    {
        series.Column(new double[] { 54, 5 }).Name("2010 Bah")
         .Labels(labels =>
        labels.Template("#= series.name #")           
        .Background("transparent")
        .Visible(true));
        series.Column(new double[] { 24, 21 }).Name("2010 Non Bah").Labels(labels =>
       labels.Template("#= series.name #")
       .Background("transparent")
       .Visible(true));

        series.Column(new double[] { 54, 5 }).Name("2011 Bah").Labels(labels =>
       labels.Template("#= series.name #")
       .Background("transparent")
       .Visible(true));

        series.Column(new double[] { 24, 21 }).Name("2011 Non Bah")
         .Labels(labels =>
        labels.Template("#= series.name #")            
        .Background("transparent")
        .Visible(true));

        series.Column(new double[] { 10, 52 }).Name("2012 Bah")
        .Labels(labels =>
       labels.Template("#= series.name #")
       .Background("transparent")
       .Visible(true));

        series.Column(new double[] { 12, 65 }).Name("2012 Non Bah")
        .Labels(labels =>
        labels.Template("#= series.name #")
        .Background("transparent")
        .Visible(true));
    })
    .CategoryAxis(axis => axis
        .Categories("Male", "FeMale")

        .Justify(true)
    )

    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}")
        .Template("#= series.name # : #= value #")
    )
    )

score -1 · Accepted Answer · answered Jul 25 '16 at 05:35

Finally lot of struggle, i found the solution

jsbin working example

 $("#chart").kendoChart({
  seriesDefaults: {
    type: "column"
  },
  series: [{
    name: "Sales",
    data: [10, 20, 0.5, 0, 100, 0]
  }],
  valueAxis: [{
    majorGridLines: { visible: false },
    title: { text: "Sales" },
    axisCrossingValue: [0,0]
  }],
  categoryAxis: [{
    categories: ["Order", "Invoice", "Credit Memo", "Order", "Invoice", "Credit Memo"],
    majorGridLines: { visible: false }
  },
                 {
    categories: ["Item", "Resources"],
    line: { visible: true },
    majorGridLines: { visible: true },
    title: { text: "Type & Document Type" }
  }
                ]
});

how to categories series in kendo chart mvc?

1 Answers1