ChartJS Label Example

Adding a text label to a ChartJS Annotation Box

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.3/chartjs-plugin-annotation.min.js"></script>
<canvas id="myChart" width="600" height="400"></canvas>

JavaScript

var ctx = document.getElementById("myChart").getContext("2d");

//Adding functionality to add vertical line

// Create gradient
    grd = ctx.createLinearGradient(0, 400.000, 0, 100.000);

// Add colors
    grd.addColorStop(0.000, 'rgba(0, 255, 0, 1.000)');
    grd.addColorStop(0.200, 'rgba(191, 255, 0, 1.000)');
    grd.addColorStop(0.400, 'rgba(221, 255, 0, 1.000)');
    grd.addColorStop(0.600, 'rgba(255, 229, 0, 1.000)');
    grd.addColorStop(0.800, 'rgba(255, 144, 0, 1.000)');
    grd.addColorStop(1.000, 'rgba(255, 50, 0, 1.000)');

var data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
        datasets: [
            {
                lineTension: 0,
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderCapStyle: 'butt',
                borderColor: "red",
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                borderWidth: 4,
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointRadius: 0,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 0,
                pointHitRadius: 0,
                data: [ {x: 0, y: 1300}, {x: 12, y: 1300}],
                showLines: false,
            },
            {
                lineTension: 0,
                backgroundColor: 'rgba(0, 0, 0, 0)',
                borderCapStyle: 'butt',
                borderColor: "#42bff4",
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                borderWidth: 4,
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
               ...