Beginner trouble getting Code Component chart to display content

Developer Support
4

For anyone stumbling upon this later,

I ended up switching from recharts to chartjs and the react-chartjs-2 package, with minimal issues so far.

radar chart component 
// components/chartjs/RadarChart.js
import React from "react";
import {
  Chart as ChartJS,
  RadarController,
  RadialLinearScale,
  PointElement,
  LineElement
} from 'chart.js';
import { Radar } from "react-chartjs-2";

// Register necessary Chart.js components
ChartJS.register(
  RadarController,
  RadialLinearScale,
  PointElement,
  LineElement
);

const ChartJsRadar = ({ radarLabels, radarDatasets, radarOptions }) => {
  const data = {
    labels: radarLabels,
    datasets: radarDatasets,
  };

  return (
      <Radar data={data} options={radarOptions} />
  );
};

export default ChartJsRadar;
component registration for plasmic 
//plasmic-init.ts
import ChartJsRadar from './components/chartjs/RadarChart';

PLASMIC.registerComponent(ChartJsRadar, {
  name: 'RadarChart',
  props: {
    radarLabels: {
      type: 'object',
      description: 'Labels for the radar chart',
    },
    radarDatasets: {
      type: 'object',
      description: 'Data for the radar chart',
    },
    radarOptions: {
      type: 'object',
      description: 'Configuration options for the radar chart',
    },
  },
});
1 Like