Designing Custom Block using Chart JS, What is syntax to get column array data from table into data point

Forum|Forum|5 years ago
July 29, 2020
1 reply
17 views

Azeem_Y
New Participant

Hi folks, I’m having alot of issues calling the records array that holds all the column data in my grid into my chart.js react file.

Currently I have a static array in my data field where I am manually entering inputs but I want the data field to be able to read directly from a specific column array so it will update dynamically?

Does anyone have any examples on how to have this done?

A

+18

augmented
Inspiring
Forum|Forum|5 years ago
July 30, 2020

This may or may not be helpful. First, here’s a link to the simple chart index.js file.

github.com

Airtable/blocks-simple-chart/blob/master/frontend/index.js

import {
    initializeBlock,
    useBase,
    useRecords,
    useGlobalConfig,
    TablePickerSynced,
    ViewPickerSynced,
    FieldPickerSynced,
    Box,
    FormField,
} from '@airtable/blocks/ui';
import React from 'react';

// This block uses chart.js and the react-chartjs-2 packages.
// Install them by running this in the terminal:
// npm install chart.js react-chartjs-2
import {Bar} from 'react-chartjs-2';

const GlobalConfigKeys = {
    TABLE_ID: 'tableId',

This file has been truncated. show original

Look at functions useRecords and getChartData.

Good luck!

Like

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded