Mapping JSON data to Chart.js Bar chart in React

Question

can anyone help me in getting the correct data from a JSON file to Chart.js barchart. I can access the JSON file and it works fine. I seem to have a problem with mapping the correct JSON-hierarchy/object for Chart.js labels, datasets and options. I tried JSONdata.barchart.labels.map for labels with no help.

The React component:

import React from "react";
import Layout from "./Layout";
import { Grid, Header, Statistic } from "semantic-ui-react";
import JSONdata from "../data/DashboardData.json";
import { Bar } from "react-chartjs-2";

const DashboardBarChart = () => {
  const data = {
    labels: [JSONdata.barChart.map(item => item.labels)],
    datasets: [JSONdata.barChart.map(item => item.datasets)],
    options: [JSONdata.barChart.map(item => item.options)]
  };
  return <Bar data={data} />;
};

export default class Dashboard extends React.PureComponent {
  renderDashboardStatistics = () => {
    return JSONdata.statistics.map(item => {
      return (
        <Statistic key={item.id}>
          <Statistic.Value>{item.value}</Statistic.Value>
          <Statistic.Label>{item.id}</Statistic.Label>
        </Statistic>
      );
    });
  };

  render() {
    return (
      <Layout {...this.props}>
        <Header as="h2">Dashboard</Header>
        <Grid stackable>
          <Grid.Row>
            <Grid.Column width={16}>
              <Header as="h4" dividing>
                Monthly users
              </Header>
              <DashboardBarChart />
            </Grid.Column>
          </Grid.Row>
          <Grid.Row>
            <Grid.Column width={16}>
              <Header as="h4" dividing>
                Statistics
              </Header>
              <Statistic.Group size="small">
                {this.renderDashboardStatistics()}
              </Statistic.Group>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Layout>
    );
  }
}

The JSON file:

{
  "barChart": [
    {
      "labels": [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ]
    },
    {
      "datasets": [
        {
          "label": "Monthly users",
          "backgroundColor": "rgba(255,99,132,0.2)",
          "borderColor": "rgba(255,99,132,1)",
          "borderWidth": 1,
          "hoverBackgroundColor": "rgba(255,99,132,0.4)",
          "hoverBorderColor": "rgba(255,99,132,1)",
          "data": [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56]
        }
      ]
    },
    {
      "options": {
        "scales": {
          "yAxes": [
            {
              "ticks": {
                "beginAtZero": true
              }
            }
          ]
        },
        "layout": {
          "padding": {
            "left": 0,
            "right": 0,
            "top": 0,
            "bottom": 0
          }
        },
        "legend": {
          "display": false
        }
      }
    }
  ],

Answer 1

I'm not sure on the charts required data structure but I think you can remove the square brackets around the JSONdata and the map; instead just access the properties directly e.g.

labels: JSONdata.barChart[0].labels,
datasets: JSONdata.barChart[1].datasets,
options: JSONdata.barChart[2].options