how to display table from chart js data in canvas.js using java script .?

Question

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 ctxP = canvasP.getContext('2d')
    var myPieChart = new Chart(ctxP, {type: 'line',
    data: 
        { 
            labels: JSON.parse(localStorage.getItem("label")),
            datasets: [
      {label: "DFT", data: JSON.parse(localStorage.getItem("dft")), borderColor: "ORANGE",fill: false,markerType: "triangle"},
      {label: "FUNCTIONAL", data: JSON.parse(localStorage.getItem("fun")), borderColor: "GREEN",fill: false,markerType: "circle"}
    ]
        },
        options: {
            legend: {
            display: true,
            position: "right"

            }
        }
    });

addTable(myPieChart);

        function addTable(myPieChart){
                              var tableData = "";
                             for(var i = 0; i < myPieChart.data.datasets.length; i++)
                             { 
             tableData += "<tr>" + "<td style='color:" + myPieChart.data.datasets[i].borderColor + 
                            "'>&#9632;" + myPieChart.data.datasets[i].label + "</td>";
              for(var j = 0; j < myPieChart.data.datasets[i].data.length; j++){
                      tableData += ("<td>" + myPieChart.data.datasets[i].data[j].length +"%</td>")
                         }

                      tableData += "</tr>";
                        }
                 $("#chartData").append(tableData)
                   }    
              }</script>

Answer 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>")

Answer 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: {
    //set responsive to false
    responsive: 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.

#chartData td {
    text-align: center;
}

Also try experimenting with more CSS styles and see the outcome