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

[Azeem_Y]

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?

[augmented]

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!