how to display chart data as html table chartjs

Question

I would like to know how to view chart data as html table on button click in chartjs. I have implemented the line chart using chartjs , xaxis represents the color yaxis represents votes and points

Working fiddle:https://jsfiddle.net/miyavv/ehqrL20o/ I want to display chart as table

Color | # of Votes | # of Points
Red     12           7
Blue    19           11
... and so on

var options = {
  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
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
//html
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Unfortunately, your question is not clear, please provide more info or sandbox sample. — Alex
– Alex, Commented Jan 11, 2020 at 12:26
@Alex thanks for reply, I want to display chart data as html table, — Sen
– Sen, Commented Jan 13, 2020 at 1:53
What's the problem with @SciFiThief answer? what do you mean by "chart as table"?please draw your desired result and attach to question. could help to clarify exactly what do you intend — Alex
– Alex, Commented Jan 15, 2020 at 21:36

Nimantha · Accepted Answer · 2023-11-07 02:34:56Z

1

You need to identify what in your chart data could be represented as columns and rows in the table. If you named your x-axis, you could represent the chart data like this:

Color | # of Votes | # of Points
Red     12           7
Blue    19           11
... and so on

Also, chart data can be represented as a crosstab which is a more direct representation (since datapoint lies where x and y intersects):

             | Red | Blue | ... and so on
# of Votes     12    19
# of Points    7     11

Here's the example of how you can convert the chart data to crosstab: https://jsfiddle.net/tara5/cjvuphkL/

edited Nov 7, 2023 at 2:34

Nimantha

6,5476 gold badges32 silver badges78 bronze badges

answered Jan 13, 2020 at 4:59

SciFiThief

5865 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sen Over a year ago

thanks for reply, I have updated my question and added fiddle link

SciFiThief Over a year ago

I see that you provided a fiddle link, but still, it doesn't have any code where you try to convert chart data to the table. Also, you could easily modify my example with the crosstab to a table (it is basically a table). You just need to swap rows and columns, and name the first column 'Colors'. The example has all the necessary code.

Collectives™ on Stack Overflow

how to display chart data as html table chartjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related