How can I integrate react-chartjs-2 with chartjs-plugin-datasource to use a datasource at an s3 url

Question

This is my first post to stackoverflow and I would really appreciate any help if it could be given!

Background

I am a newbie web developer but have experience developing python applications for data pipelines and ML.

I have created an AWS amplify application using react and am trying to create a dashboard within it to show the results of some processed data. The datafile I am trying to retrieve is a .csv file.

I have chosen to use chartjs-2 for visualisation and so am using the react-chartjs-2 wrapper, to enable me to load in csv data from a url I am using the chartjs-plugin-datasource plugin.

Dashboard component code

Below is my current code for the dashboard component.

 import React from "react"; import Amplify, { Storage } from "aws-amplify"; import awsmobile from "./aws-exports"; import { Doughnut, Chart } from "react-chartjs-2"; import ChartDataSource from "chartjs-plugin-datasource"; // TODO create a dashboard app with a chartjs set of views and a pivot table component // TODO create a storage.get method that goes and retrieves the file Amplify.configure(awsmobile); Storage.configure({ level: "private" }); Chart.plugins.register(ChartDataSource); export default function Dashboard() { const getFileURL = async e => { Storage.get("test.csv", { level: "private" }) .then(result => console.log(result)) .catch(err => console.log(err)); }; const fileURL = getFileURL(); return ( <Doughnut data={{url : fileURL}} options={{ datasource: { url: fileURL, rowMapping: "index", datasetLabels: "some cell range", indexLabels: "some cell range", data: "the data to be displayed as a cell range" } }} /> ); }

Debugging

The getFileURL method works as expected, I have reviewed the results in the developer options in chrome.

I get two errors in the developer console:

1. Uncaught Error: "undefined" is not a data source type.

I believe the issue here is that it is not recognising the url datasource and downloading the object. I think this could either because the plugin is not being enabled correctly or that it is simply reading the url rather than pulling the file.

2. Uncaught TypeError: Cannot read property 'config' of undefined.

Frankly I have no idea what this means in this context.

How do I resolve these issues so that I can get my csv file into my doughnut chart?

Answer 1

You should specify ChartDataSource as a plugins option.

     <Doughnut
      data={{ url: fileURL }}
      plugins={[ChartDataSource]}
      options={{
        plugins: {
          datasource: {
            type: 'csv',
            url: fileURL,
            rowMapping: 'index',
            datasetLabels: "some cell range",
            indexLabels: "some cell range",
          }
        }
      }}
    />