[Chartjs]-Chart.js . ASP . Legend Template

Try

legendTemplate: '<%="<:=name.toLowerCase():>-legend\"><: for (var i=0; i<segments.length; i++){:><li><span style=\"background-color:<:=segments[i].fillColor:>\"></span><:if(segments[i].label){:><:=segments[i].label:><:}:></li><:}:></ul>".Replace(":", "%")%>'

Details

Features

Value

Permits

Systems

–%>

                                <%--Donut/Pie Chart--%>
                                <div class="col-md-10">
                                    <div style="background-color:#e2e9f6; padding: 2em; height:375px;">
                                        <canvas width="658" height="375" id="doughnut" style="width: 527px; height: 300px;"></canvas>
                                    </div>
                                </div>

                            <div id="pieLegend"></div>
                            </div>

                            <%--Donut Chart--%>
                            <script>

                                $(function ()
                                {                                                                                                                                                                     
                                    var iPropertyDetails = $('.property_details').val();
                                    var iPropertyAttributes = $('.property_features').val();
                                    var iPropertyHistory = $('.property_history').val();
                                    var iPropertyAvm = $('.property_avm').val();
                                    var iPropertyPermits = $('.property_permits').val();
                                    var iPropertySystems = $('.property_systems').val();

                                    var data =
                                    [

                                        {
                                            value: Number(iPropertyDetails),
                                            color: "#f56954",
                                            highlight: "#f56954",
                                            label: "Property Details"
                                        },
                                        {
                                            value: Number(iPropertyAttributes),
                                            color: "#00a65a",
                                            highlight: "#00a65a",
                                            label: "Property Features"
                                        },
                                        {
                                            value: Number(iPropertyHistory),
                                            color: "#f39c12",
                                            highlight: "#f39c12",
                                            label: "History"
                                        },
                                        {
                                            value: Number(iPropertyAvm),
                                            color: "#3c8dbc",
                                            highlight: "#3c8dbc",
                                            label: "Value",
                                        },
                                        {
                                            value: Number(iPropertyPermits),
                                            color: "#00c0ef",
                                            highlight: "#00c0ef",
                                            label: "Permited Work",
                                        },                                                
                                        {
                                            value: Number(iPropertySystems),
                                            color: "#d2d6de",
                                            highlight: "#d2d6de",
                                            label: "Systems Work"
                                        }
                                    ];

                                    var options =
                                    {
                                        //Boolean - Whether we should show a stroke on each segment
                                        segmentShowStroke: true,
                                        //String - The colour of each segment stroke
                                        segmentStrokeColor: "#fff",
                                        //Number - The width of each segment stroke
                                        segmentStrokeWidth: 2,
                                        //Number - The percentage of the chart that we cut out of the middle
                                        percentageInnerCutout: 50, // This is 0 for Pie charts
                                        //Number - Amount of animation steps
                                        animationSteps: 100,
                                        //String - Animation easing effect
                                        animationEasing: "easeOutBounce",
                                        //Boolean - Whether we animate the rotation of the Doughnut
                                        animateRotate: true,
                                        //Boolean - Whether we animate scaling the Doughnut from the centre
                                        animateScale: true,
                                        //Boolean - whether to make the chart responsive to window resizing
                                        responsive: true,
                                        // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                                        maintainAspectRatio: true,

                                        legendTemplate: '<%="<:=name.toLowerCase():>-legend\"><: for (var i=0; i<segments.length; i++){:><li><span style=\"background-color:<:=segments[i].fillColor:>\"></span><:if(segments[i].label){:><:=segments[i].label:><:}:></li><:}:></ul>".Replace(":", "%")%>'

                                        <%--legendTemplate: "<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" --%>

                                    };

                                    var ctx = $("#doughnut").get(0).getContext("2d");
                                    var chart = new Chart(ctx);
                                    var doughnut = chart.Doughnut(data, options);
                                    var legend = doughnut.generateLegend();                                 
                                    $('#pieLegend').append(legend);
                                });

                            </script>

You need to replace this:

<%=texthere%>

with this

<%="<%=texthere%" + ">" %>

and this

<%texthere%>

with this

<%="<%texthere%" + ">" %>

Of course, replace texthere with your code.

So in your case try

legendTemplate: <%= "<%=name.toLowerCase()%" + ">" %>-legend\"><%="<% for (var i=0; i<segments.length; i++){%" + ">" %><li><span style=\"background-color:<%= "<%=segments[i].fillColor%" + ">" %>\"></span><%="<%if(segments[i].label){%" + ">" %><%= "<%=segments[i].label%><%}%" + ">" %></li><%="<%}%" + ">" %></ul>" 

In your .cs file, add a public property

public string value;
protected void Page_Load(object sender, EventArgs e)
{ .........
     value = "<%=value%>";
}

In your .aspx page > within the js code add

tooltipTemplate: "<%=value%>"

This worked for me