add value to Line chart.js

Question

I work chartjs for show Line Chart. Now, I need to add title/value for each value mouse over In Line charts.

Js:

    var data = {
        labels: ["February", "March", "April", "May", "June", "July"],
        datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            data: [ 59, 90, 81, 56, 55, 40]

        }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            data: [ 48, 40, 59, -100, 127, 100]
        }]
    }

    var options = {animation :true};

    //Get the context of the canvas element we want to select
    var c = $('#daily-chart');
    var ct = c.get(0).getContext('2d');
    var ctx = document.getElementById("daily-chart").getContext("2d");
/*************************************************************************/

//Run function when window resizes
    $(window).resize(respondCanvas);

    function respondCanvas() {
        c.attr('width', jQuery("#daily").width());
        c.attr('height', jQuery("#daily").height());
        //Call a function to redraw other content (texts, images etc)
        myNewChart = new Chart(ct).Line(data, options);
    }

    //Initial call 
    respondCanvas();

How Do can I add title/value for each value/month?

DEMO: jsFiddle

THe fiddle is not working >>in fiddle the chart.js you have added is not working!! please update it with working link.. — MarmiK
– MarmiK, Commented Jul 3, 2014 at 7:59

jeremybarbet · Accepted Answer · 2014-07-03 07:59:51Z

If you use the latest version of chart.js there is a new update allow you to show a tooltip with value/title. http://www.chartjs.org/docs/

There is several options to custom the tooltip on mouseover

// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,

// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],

// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",

// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip label font size in pixels
tooltipFontSize: 14,

// String - Tooltip font weight style
tooltipFontStyle: "normal",

// String - Tooltip label font colour
tooltipFontColor: "#fff",

// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",

// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,

// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",

// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",

// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,

// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,

// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,

// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,

// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,

// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",

MarmiK · Accepted Answer · 2014-07-03 08:03:31Z

1

I agree with @jbr

I have just updated the chart.min.js file link in your fiddle and you existing code shows tooltip on hover the chart..

check the updated fiddle

answered Jul 3, 2014 at 8:03

MarmiK

5,8156 gold badges47 silver badges51 bronze badges

Collectives™ on Stack Overflow

add value to Line chart.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related