CODEWITHSUNDEEP
javascriptjquerylabelchart.js
Zaki Mohammed
Zaki Mohammed

Reputation: 1017

How to make label always visible on DoughnutChart.js

I have already gone through this link Chart.js - Doughnut show tooltips always?

I have implemented the code in the same way on my machine but the chart is not appearing.

The following is my code:

HTML:

<!doctype html>
<html>
<head>
    <title>Doughnut Chart</title>
    <script src="Chart.js"></script>
</head>
<body>
    <div>
        <canvas id="chart" width="200" height="200"/>
    </div>
</body>

JS:

var data = [
{
    value: 300,
    color:"#F7464A",
    highlight: "#FF5A5E"
},
{
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1"
},
{
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870"
}
]

    var options = 
{
tooltipTemplate: "<%= value %>",

onAnimationComplete: function()
{
    this.showTooltip(this.segments, true); 
},

tooltipEvents: [],

showTooltips: true  
}

var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);

Please can anybody help me out with this trouble?

Upvotes: 0

Views: 126

Answers (3)

Sabba
Sabba

Reputation: 257

Or you could forget about jquery leave the <head></head as was in the code you posted and substitute

var context = $('#chart').get(0).getContext('2d');

with

var context = document.getElementById("chart").getContext("2d");

Upvotes: 1

Miguel
Miguel

Reputation: 126

You just have to include this line in your html file to include jquery

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

Upvotes: 1

Sabba
Sabba

Reputation: 257

In the code above seems to miss the ref to jquery between <head></head> tags

Upvotes: 0

Related Questions