CODEWITHSUNDEEP
javascriptchartschart.js
VictorArcas
VictorArcas

Reputation: 630

Tooltips displaying "rgb(0,0,0)" instead of label value on bar chart

I'm using the 2.0 (Alpha) version of Chart.js, and...

The tooltips of my bar chart display the string "rgb(0,0,0)" instead of the label value with the code above. You can see that this.data.labels contains numeric strings. If I change them to regular ints, they're being displayed fine after a strange effect where you see a lot of decimals changing so fast...

var ScoresFrequencyChartDrawer = function () {
    this.data = { 
        labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
        datasets: [{
            backgroundColor: "rgba(150, 150, 150, 0.9)",
            data: [1, 1, 2, 3, 7, 12, 15, 17, 23, 15, 10]
        }]
    };
    this.options = {
        events: ["mousemove"],
        scales: {
            xAxes: [{
                display: true,
                gridLines: {
                    drawOnChartArea: false
                },
                labels: {
                    fontSize: 15,
                    fontStyle: "bolder"
                }
            }],
            yAxes: [{
                display: false,
                gridLines: {
                    drawOnChartArea: false
                }
            }]
        }
    };
    this.chart = {};
}

ScoresFrequencyChartDrawer.prototype.draw = function() {
    var canvas = document.getElementById("scores-frequency-chart");
    var ctx = canvas.getContext("2d");
    this.chart = new Chart(ctx, {
        type: 'bar',
        data: this.data,
        options: this.options
    });
}

The issue at github -> https://github.com/nnnick/Chart.js/issues/1261

Upvotes: 0

Views: 85

Answers (1)

VictorArcas
VictorArcas

Reputation: 630

I have fixed it with the code above...

// Adding this to the this.data.labels initialization
labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(eachToString),

// The eachToString function
function eachToString(el) {
    return el.toString()+"%";
}

But as the bug it is, the issue at Github remains open.

Upvotes: 0

Related Questions