Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding a Title to a Chart.js line graph

I'm trying to use fillText to draw on a chart.js canvas after it is rendered and it will not work. The best I can do is change the font of the chart. Here is my code.

var options = {

    //Boolean - If we show the scale above the chart data           
    scaleOverlay: false,

    //Boolean - If we want to override with a hard coded scale
    scaleOverride: false,

    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps: null,
    //Number - The value jump in the hard coded scale
    scaleStepWidth: null,
    //Number - The scale starting value
    scaleStartValue: null,

    //String - Colour of the scale line 
    scaleLineColor: "rgba(0,0,0,.1)",

    //Number - Pixel width of the scale line    
    scaleLineWidth: 1,

    //Boolean - Whether to show labels on the scale 
    scaleShowLabels: true,

    //Interpolated JS string - can access value
    scaleLabel: "<%=value%>",

    //String - Scale label font declaration for the scale label
    scaleFontFamily: "'Arial'",

    //Number - Scale label font size in pixels  
    scaleFontSize: 12,

    //String - Scale label font weight style    
    scaleFontStyle: "normal",

    //String - Scale label font colour  
    scaleFontColor: "#666",

    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines: true,

    //String - Colour of the grid lines
    scaleGridLineColor: "rgba(0,0,0,.05)",

    //Number - Width of the grid lines
    scaleGridLineWidth: 1,

    //Boolean - Whether the line is curved between points
    bezierCurve: true,

    //Boolean - Whether to show a dot for each point
    pointDot: true,

    //Number - Radius of each point dot in pixels
    pointDotRadius: 3,

    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth: 1,

    //Boolean - Whether to show a stroke for datasets
    datasetStroke: true,

    //Number - Pixel width of dataset stroke
    datasetStrokeWidth: 2,

    //Boolean - Whether to fill the dataset with a colour
    datasetFill: true,

    //Boolean - Whether to animate the chart
    animation: false,

    //Number - Number of animation steps
    animationSteps: 60,

    //String - Animation easing effect
    animationEasing: "easeOutQuart",

    //Function - Fires when the animation is complete
    onAnimationComplete: null

}

Chart Data labels and points are arrays.

                   var chartData = {
                        labels: labels,
                        datasets: [
                            {
                                fillColor: "rgba(220,220,220,0.5)",
                                strokeColor: "rgba(220,220,220,1)",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "#fff",
                                data: points
                            }
                        ]
                    }

                    var ctx = $("#" + item.logon).get(0).getContext("2d");
                    var chart = new Chart(ctx).Line(chartData, options);

This is done with JSON data and after the call I have:

                $("canvas").each(function (i, item) {
                    var context = $(this).get(0).getContext("2d");
                    context.textBaseline = 'top';
                    context.fillText('Test', 0, 0);
                });

The graphs just load normally without any text. If I use the context.font then all of the labels on each canvas is changed. I have turned off loading animation. Any ideas?

like image 435
Todd Skelton Avatar asked Jun 03 '14 20:06

Todd Skelton


People also ask

How do I add a title to Chartjs?

The example below would enable a title of 'Custom Chart Title' on the chart that is created. const chart = new Chart(ctx, { type: 'line', data: data, options: { plugins: { title: { display: true, text: 'Custom Chart Title' } } } }); Copied!

How do I insert a title into an Excel chart?

Click the chart, and then click the Chart Design tab. Click Add Chart Element > Chart Title, and then click the title option that you want. Type the title in the Chart Title box. To format the title, select the text in the title box, and then on the Home tab, under Font, select the formatting that you want.

What is chart legend JavaScript?

The chart legend displays data about the datasets that are appearing on the chart.


1 Answers

Instead of drawing on the canvas, I simply add a label around the element

<label for = "idOfCanvas">
Your Label<br />
    <canvas></canvas>
</label>
like image 81
9Deuce Avatar answered Sep 27 '22 22:09

9Deuce