change div border after render Canvasjs chart

Question

Im using the Canvasjs chart (http://canvasjs.com) I want to after the chart is render color of div border change to red

<div id="chartContainer" style="height:300px; width:90%; font-family:BMitra; text-align:center; border: 1px solid black;"></div>

<script>
    function charting() {
        var dataPo = [];
        $.getJSON("<?=base_url();?>report/messages/create_report2", function(data) {
            for( var i = 0; i < data.length; i++) {
                dataPo.push({ label: data[i].label, y: data[i].y });
            }
            var chart = new CanvasJS.Chart("chartContainer", {
                //backgroundColor: "#D2FEFF",
                backgroundColor: "transparent",
                theme: "theme3",
                animationEnabled: true,
                title:{
                    text:"my title",
                    fontFamily: "BYekan"
                },
                axisY:{
                    labelFontFamily: "BYekan"
                },
                axisX:{
                  labelFontFamily: "BYekan"
                },
                toolTip:{
                    fontSize: 19,
                    fontFamily: "BYekan",
                },
                data: [{
                    type: "column",
                    dataPoints : dataPo,
                }]
            });
            chart.render();
        }
</script>

Answer 1

First of all, your code is missing a few closed brackets.

Then, according to this docs, CanvasJS doesn't provide any callback handle for the render() function, but they say since it's very fast you probably won't have any issue in calling a function right after it.

This means you can change the border color with a jQuery call like this

$("yourDivSelector").css("border-color", "red");

and place it right after chart.render();. Your final code should look like this

<script>
    function charting() {
        var dataPo = [];
        $.getJSON("<?=base_url();?>report/messages/create_report2", function(data) {
            for( var i = 0; i < data.length; i++) {
                dataPo.push({ label: data[i].label, y: data[i].y });
            }
            var chart = new CanvasJS.Chart("chartContainer", {
                //backgroundColor: "#D2FEFF",
                backgroundColor: "transparent",
                theme: "theme3",
                animationEnabled: true,
                title:{
                    text:"my title",
                    fontFamily: "BYekan"
                },
                axisY:{
                    labelFontFamily: "BYekan"
                },
                axisX:{
                  labelFontFamily: "BYekan"
                },
                toolTip:{
                    fontSize: 19,
                    fontFamily: "BYekan",
                },
                data: [{
                    type: "column",
                    dataPoints : dataPo,
                }]
            });
            chart.render();
            $("yourDivSelector").css("border-color", "red");
        });
    }
</script>