How To Display Table From Chart Js Data In Canvas.js Using Java Script .?

In my projects i need to make my chart more responsive . I print table from chartjs data using too but i got garbage value in table . any other method is also appreciated var c

Solution 1:

So, what was the error you were getting and what did you expect from the code? Please also provide that, other than that, this code here:

tableData += ("<td>" + myPieChart.data.datasets[i].data[j].length +"%</td>")

is adding the length of the data and not the data itself, remove the .length to get the actual data:

tableData += ("<td>" + myPieChart.data.datasets[i].data[j] +"%</td>")

Solution 2:

This is the same addTable() function with a few changes:

function addTable(myPieChart) {
    var tableData = "";
    var data_size = 0;
    for (var i = 0; i < myPieChart.data.datasets.length; i++) {
        tableData += "<tr>";
        for (var j = 0; j < myPieChart.data.datasets[i].data.length; j++) {
            tableData += ("<td>" + myPieChart.data.datasets[i].data[j] + "%</td>")
        }
        tableData += "<td style='color:" + myPieChart.data.datasets[i].borderColor +
            "'>&#9632;" + myPieChart.data.datasets[i].label + "</td>";
        // Notice how I have swapped the labels with the data// Because your legend is also on the right
        tableData += "</tr>";
    }
    $("#chartData").append(tableData);
    data_size = $('#chartData').children('tr:first').children('td').length;
    // Get the size of the data in the table
    $('#chartData').children('tr').children('td').css({
        // This 500 is the width of the canvas element that holds the chart// This code makes the width of the cells responsive
        width: 500 / data_size
    });
}

Also this option makes the chart scale according to your needs:

options: {
    //setresponsivetofalseresponsive:false,
    legend: {
        display:true,
        position:"right"
    }
}

You can also add this CSS to make it close to what you expect, but this is the closest it can get because they have different structures. They cannot possibly align perfectly.

#chartDatatd {
    text-align: center;
}

Also try experimenting with more CSS styles and see the outcome