[Chartjs]-Chart.js passing value data dynamic

Since you have provided your ajax result, this will not work with the chart generation. In your case result["labels"] is a string and you are just making a list with 1 element which is the whole string(which is not valid for the labels property and will not work). What you should do is split the string, format it correctly and then supply it as a list to the labels property. Easiest way would be to use the split() function, and in your case you could split by ", ". Although I would recommend to implement a better response if its possible (have it something like so: {"labels": ["13-Nov-2017", "14-Nov-2017", ...]}).

Hope this helps!

For the first time you can fill the chart with your own value, but when it is coming for dynamically appending data then you should remove the canvas element and regenerate it. So that your data will get appended dynamically on chart.

You can try something like this.

<canvas id="chartbtc" class="canvasChart"></canvas>

<script>

    dynamicDataAppendOnChart(labels, data); // On page loading you will be having your own data so you can pass them, or if you want that to be happen with ajax when page loading itself you can trigger the click event.

    $('#btnClick').trigger('click');

    // You will be calling the function with click event...
    $('#btnClick').on('click', function () {
        var data = '', labels = '';
        $.ajax({
            url: url,
            type: "POST",
            data: data,
            async: isAsync,
            success: function (result) {
               result = JSON.parse(result);
               labels = result['labels'];
               data = result['data'];
            }
        });
        dynamicDataAppendOnChart(labels, data); // Now you can call the function by passing labels and data
    });

    function dynamicDataAppendOnChart() {
        $('#chartbtc').remove();
        $('#appendTheCanvasElement').append('<canvas id="chartbtc" class="canvasChart"><canvas>'); // This would create new canvas element every time and removes the older one.
        var ctx = document.getElementById("chartbtc");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [labels],
                datasets: [{
                    label: 'Market Price (USD)',
                    data: [data],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: false
                        }
                    }]
                }
            }
        });
    }
</script>

Try This.
Declare label and data as

var labels = result['labels'].split(","); // Return Array of Strings Of labels
var data =   JSON.parse("[" +  result['data'] + "]");// return array of data

Chage

labels: [labels],
data: [data],

to

labels: labels,
    data: data,

Because it already in array