Add text on any part of a chart using CanvasJs

Question

i am using canvasjs to create a simple x/y scatter

    var chart = new CanvasJS.Chart('chartContainer',
    {

    toolTip:{   
    content: '{x} : {y} : {label}'      
    },

    axisX: {
    minimum: 0,
    maximum: 11,
    interval: 1,
    labelFormatter: function(e){
    return e.value;
    }
    },

    axisY: {
    minimum: 0,
    maximum: 100,
    interval: 10,
    intervalType: 'number',
    gridThickness: 0,
    stripLines: [
    {
        value: 0,
        showOnTop: true,
        color: 'gray',
        thickness: 2
    }
    ]
    },

      data: [
    {        
        type: 'line',
    lineColor:'grey',
    markerColor:'grey',
        dataPoints: [
        { x: lsx, y: lsy},
        { x: lex, y: ley},
        ]
    },
    {        
        type: 'line',
    lineColor:'grey',
    markerColor:'grey',
        dataPoints: [
        { x: lsx2, y: lsy2},
        { x: lex2, y: ley2},
        ]
    },
    {        
        type: 'line',
    lineColor:'grey',
    markerColor:'grey',
        dataPoints: [
        { x: lsx3, y: lsy3},
        { x: lex3, y: ley3},
        ]
    },


      {
        type: 'scatter',
    cursor: 'pointer',
    markerSize: 15,
    markerColor:'#1FBED6',
    dataPoints: dataPoints
   }


    ]



    });

    chart.render();

this works well and i get the graphic i want. I have some areas with points in them and i want to add text to the graphic that explains what each area means.

i have looked and come only across an example using convertValueToPixel to position indexlabels as shown jsfiddle

is there a way to add text by coordinates / values?

Answer 1

If you like to show some information related to data-point, you can use indexLabel property. Please find code below:

 var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Scatter Chart with IndexLabels", }, data: [ { type: "scatter", indexLabel: "{y}", markerSize: 25, dataPoints: [ { y: 10 }, { y: 15 }, { y: 25 }, { y: 30 }, { y: 28 } ] } ] }); chart.render(); 

 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 260px; width: 100%;"> 

If you like to show some extra text and position anywhere on the chart, you can do so as shown in the JSFiddle that you have shared, with the help of convertValueToPixel method (which returns pixel coordinate of the given value over specific axis) or by directly setting CSS top and left properties in pixels, you can add text over chart.

 var chart = new CanvasJS.Chart("chartContainer", { title: { text: "Position External DOM on Chart" }, data: [ { type: "column", dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55 }, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 95 }, { x: 60, y: 68 }, { x: 70, y: 28 }, { x: 80, y: 34 }, { x: 90, y: 14 } ] } ] }); chart.render(); var text = document.createElement("p"); text.innerHTML = "Some Text"; document.getElementById("chartContainer").appendChild(text); text.style.position = "absolute"; text.style.top = chart.axisY[0].convertValueToPixel(65) - (text.clientHeight / 2) + "px"; text.style.left = chart.axisX[0].convertValueToPixel(20) - (text.clientWidth / 2 - 5) + "px"; 

 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 260px; width: 100%;"></div>