Chart.js中的自定义工具提示

Question

I'm trying to display custom tool tips with Chart.js depending on the data classification.
I want to display:
1: Tooltip1
2: Tooltip2
3: Tooltip2
Following is the code.

<script type="text/javascript" language="javascript">
    var pieData = [
           {
               value: parseInt(document.getElementById("<%= txtPendingCount.ClientID %>").value, 0),
               color: "#f5170a",                  
               highlight: "#f85248",
               label: "1"
          },
           {
               value: parseInt(document.getElementById("<%= txtCompletedCount.ClientID %>").value, 0),                   
               color: "#ce5e0c",                   
               highlight: "#cf7d40",
               label: "2"
           },
           {
               value: parseInt(document.getElementById("<%= txtWithheldCount.ClientID %>").value, 0),
               color: "#f4cd0c",                   
               highlight: "#f7de62",
               label: "3"
           }
   ];

    window.onload = function () {
        var ctx = document.getElementById("chart-area").getContext("2d");                       
        window.myPie = new Chart(ctx).Pie(pieData);
    };
</script>

Can anyone please suggest how to do this?

Thanks.

Answer 1

In the example you can see how to do this, you can note that i use doughut but is the same idea to do this with pie chart:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="chart-area" style="display:inline;"></canvas> <script> var doughnutData = [ { value: 200, color: "#FFF", label:"White", }, { value: 200, color: "#bb2028", label:"Red", }, { value: 80, color: "#d97128" , label:"Orange", }, { value: 40, color: "#fada09", label:"Yellow", }, { value: 100, color: "#6bb345", label:"Light Green", }, { value: 60, color: "#b4aea7", label:"Gray", }, { value: 200, color:"#2d5f2e", fillColor:"#2d5f2e", label:"Green", } ]; window.onload = function(){ var helpers = Chart.helpers; var canvas= document.getElementById("chart-area"); var ctx = canvas.getContext("2d"); var globalChartConfig = { responsive : true, tooltipTemplate: "<%if (label){%>Label Color: <%=label%>: <%}%> <%= value %>", } window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, globalChartConfig); }; </script>