CODEWITHSUNDEEP
javascriptchart.js
user3522492
user3522492

Reputation: 125

How do I access Chart.js default settings? (& related -- how do I turn the tool tips on?)

I am using a Chart.js doughnut chart. The chart appears fine. However, it is missing tool tips (as have all other charts I have ever made using Chart.js). Why is this, and how do I turn them on? The online documentation claims that I can access global defaults (in which the tool tips can be set on/off, although the site claims that they default to be on) at Chart.defaults.global, which doesn't work for me because Chart.defaults doesn't even exist. I am trying to access these defaults so I can turn the tool tips on. Thanks for any help you can provide. 

    var context = document.getElementById("scoreChart").getContext("2d");
    var chartData = [
        {
            label: "Number correct",
            value: $scope.numRight,
            color: "rgb(134, 202,54)",
            highlight: "rgb(100,100,100)"
            //not sure what highlight does
        },
        {
            label: "Number wrong",
            value: $scope.myTest.testQuestions.length - $scope.numRight,
            color: '#7c0b10',
            highlight: 'rgb(10,10,10)'
        }
    ];
    var theChart = new Chart(context);
    var theDough = theChart.Doughnut(chartData/*, chartOptions*/);
    console.log("Here is the chart object:");
    console.log(theChart);
    console.log("Chart.Doughnut object:");
    console.log(theChart.Doughnut);
    console.log("Chart.Doughnut.defaults:");
    console.log(theChart.Doughnut.defaults); // <-- This works
    console.log("theChart.defaults:");
    console.log(theChart.defaults); // <--This is undefined
    console.log("Chart.defaults.global:");
    console.log(Chart.defaults.global); // throws an error 
                        // because Chart.defaults is undefined

UPDATE: Fixed it. The bower version of Chart.js is extremely old. see my answer below.

Upvotes: 0

Views: 2212

Answers (2)

user3522492
user3522492

Reputation: 125

I downloaded Chart.js using Bower. The version of Chart.js listed on Bower is old. That is why the documentation was wrong. I had to cut and paste the newest Chart.js from Github into my project. And voila, tooltips and the object behaves as the documentation says it should. Alternatively, and easier, as JAAulde pointed out, you can just set your bower dependecies to point to:

  "chartjs": "master"

and that should automatically pull the right copy.

Upvotes: 1

Aaroh Mankad
Aaroh Mankad

Reputation: 176

theChart and theDough should be set in one go, not as separate objects. For example:

var theChart = new Chart(ctx).Doughnut(data);

If this still does not get you tooltips, pass in and modify the following options:

var theChart = new Chart(ctx).Doughnut(data, {
     // Boolean - Determines whether to draw tooltips on the canvas or not
     showTooltips: true,
});

For further variety in your tooltips styling, check out the documentation for global chart options on this page: http://www.chartjs.org/docs/#getting-started-global-chart-configuration

Upvotes: 0

Related Questions