JSFiddle - React, Tailwind, and code Playground

by tara5

HTML

<div id='container'></div>

JavaScript

const tableContainer = document.getElementById('container');

const chartData = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
        },  
            {
                label: '# of Points',
                data: [7, 11, 5, 8, 3, 7],
                borderWidth: 1
            }
        ]
  },
  options: {
    scales: {
        yAxes: [{
        ticks: {
                    reverse: false
        }
      }]
    }
  }
};

const xAxis = chartData.data.labels;
const yAxis = chartData.data.datasets;

const tableHeader = `<tr>${
	xAxis.reduce((memo, entry) => {memo += `<th>${entry}</th>`; return memo;}, '<th></th>')
}</tr>`;

const tableBody = yAxis.reduce((memo, entry) => {
		const rows = entry.data.reduce((memo, entry) => {
      	memo += `<td>${entry}</td>`
      	return memo;
      }, '');
      
		memo += `<tr><td>${entry.label}</td>${rows}</tr>`;

    return memo;
}, '');

const table = `<table>${tableHeader}${tableBody}</table>`;

tableContainer.innerHTML = table;