How can be determined (X, Y) coordinates in the ctx.fillText() command based on the ChartJs coordinate system?

JajaRodriguez commented 5 years ago

Is there any way to assign text position via chartjs coordinate system, in stead of "width., height."?

For instance, according to xCoord & yCoord arrays, is it possible to set the position of ctx.fillText x,y coordinates:

In stead of ctx.fillText("s(A)", width .28, height .70); can be like this : ctx.fillText("s(A)", 2005, 3); (2015,9) is belong to chartjs coordinate system.

My Aim: s(A) can be seen on chartjs area at the point of (2005,3) s(A) can be seen on chartjs area at the point of (2015,9)

Here is My Code:

<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div class="w3-row">
        <div class="w3-col s3"><p></p></div>
        <div class="w3-col s6" align="center"><canvas id="myChart" height="120"></canvas></div>
        <div class="w3-col s3"><p></p></div>
    </div>
    <div class="w3-row">
        <div class="w3-col s3"><p></p></div>
        <div class="w3-col s6" align="center"><canvas id="myTau" height="120"></canvas></div>
        <div class="w3-col s3"><p></p></div>
    </div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<script type="text/javascript">
    var plugin = {
        beforeDraw: function (chart) {
            var width = chart.chart.width,
                height = chart.chart.height,
                ctx = chart.chart.ctx;
            ctx.restore();
            ctx.font = "1em sans-serif";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText("s(A)", width * .28, height * .70);
            ctx.fillText("s(B)", width * .75, height * .55);

//These section were set according to canvas width and height
//I want to set coordinates chartjs coordinates like in data {x:1993,y:70}
// Doesnt Work Like This: ctx.fillText("s(A)", 2005, 3);
//Doesnt Work Like This: ctx.fillText("s(B)", 2015, 9);
            ctx.save();
        }
    };
    Chart.plugins.register(plugin);

    var xCoord = new Array(1997, 2003, 2005, 2009, 2014, 2018, 2019);
    var yCoord = new Array(1, 3, 5, 3, 6, 10, 9);
    var c = [];
    for (var i = 0; i < xCoord.length; i++) {
        var obj = { x: xCoord[i], y: yCoord[i] };
        c.push(obj);
    }
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: 'None',
                    data: c,
                    borderWidth: 1,
                    borderColor: "#3e95cd",
                    fill: false,
                    cubicInterpolationMode: 'monotone'
                }
                ]
            },
            options: {
                plugins: [plugin],
                title: {
                    display: true,
                    text: 'My Chart'
                },
                tooltips: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'bottom',
                        scaleLabel: {
                            display: true,
                            labelString: 'Year Assembly',
                            fontSize: 14
                                    }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Aquifer Values',
                            fontSize: 15
                                    }
                    }]
                }
            }
        });
</script>

Here is CodePen: Click

Here is My Aim: samplechart

benmccann commented 5 years ago

Perhaps https://github.com/chartjs/chartjs-plugin-annotation will do what you're looking for?

kurkle commented 5 years ago

Something like

var x = chart.chart.scales['x-axis-0'].getPixelForValue('2005');
var y = chart.chart.scales['y-axis-0'].getPixelForValue(3);

chartjs / Chart.js

How can be determined (X, Y) coordinates in the ctx.fillText() command based on the ChartJs coordinate system? #6242