CODEWITHSUNDEEP
javascriptjquerychart.js
Zaki Mohammed
Zaki Mohammed

Reputation: 1017

How to make data always visible on bars Chart.js

Hey i have implemented the following code, everything is working fine, but if i put my options variable the chart is displayed but the data are not visible after the bars appears. I want that once the bars displayed then data should appear automatically and should be visible afterwards (not on hover). The following code doesn't allow data on hover but it doesn't make it visible entirely.

HTML:

<!doctype html>
<html>
<head>
    <title>Bar Chart</title>
    <script src="../Chart.js"></script>
</head>
<body>
    <div style="width: 40%">
        <canvas id="canvas" height="450" width="1000"></canvas>
    </div>
</body>
</html>

JS:

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
    labels : ["May","June","July","Aug","Sept","Oct"],
    datasets : [
        {
            fillColor : "rgba(66,139,202,0.8)",
            strokeColor : "rgba(0,0,0,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(0,0,0,1)",
            data : [65, 59, 80, 81, 56, 55]
        }
    ]

}
var options = 
{
tooltipTemplate: "<%= data %>",

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

tooltipEvents: [],

showTooltips: true  , 
responsive : true
}

    var ctx = document.getElementById("canvas").getContext("2d");
    var chart = new Chart(ctx).Bar(barChartData, options);

Please do me some favor, Thanks in advance.

Upvotes: 0

Views: 1720

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

You need to make a couple of minor changes (value instead of data and bars instead of segments)

...
tooltipTemplate: "<%= value %>",
onAnimationComplete: function () {
    this.showTooltip(this.datasets[0].bars);
},
...

assuming you have only one series.

Fiddle - http://jsfiddle.net/s4pudkz8/

enter image description here

Upvotes: 1

Related Questions