JSFiddle - React, Tailwind, and code Playground

by Kirti Vishwakarma

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="portlet box red">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-reorder"></i>Change In AGPMS
                    </div>
                    <div class="tools Padding2px">
                        <a href="#portlet-config" data-toggle="modal" class="config"></a>
                        <a href="javascript:;" class="reload"></a>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="demo-section k-content wide">
                           
                    </div>
            </div>
            </div>

CSS

thead {
    border-bottom: 1px solid #ccc;
}

th {
    padding: 5px;
    font-weight: bold;
}

td {
    padding: 5px;
}

fieldset {
    margin: 5px;
    padding: 5px;
    border: 1px solid #ccc;
}

fieldset legend {
    padding: 3px 10px;
}

JavaScript

@(Html.Kendo().Chart()
                            .Name("chart")
                            .Title("Default Pie with Legend.")
                            .Legend(legend => legend
                                .Position(ChartLegendPosition.Top)
                            )
                            .Series(series =>
                            {
                                series.Pie(new dynamic[] {
                                    new {category = "Application",value = 35},
                                    new {category = "Apllication Parts",value = 25},
                                    new {category = "Comment",value = 20},
                                    new {category = "Duplicate Parts",value = 10},
                                    new {category = "Footnote",value = 10}
                                })
                                .Labels(labels => labels
                                    .Visible(false)
                                    .Template("#= category # - #= kendo.format('{0:P}', percentage)#")
                                );
                            })
                            .Tooltip(tooltip => tooltip
                                .Visible(true)
                                        .Template("#= category # - #= kendo.format('{0:P}', percentage)#")
                            )
                        )