@ea-lab/reactive-json-docs/public/rjbuild/docs/chartjs/overview.yaml

Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides

renderView:
  - type: h1
    content: Chart.js integration overview

  - type: Markdown
    content: |
      Reactive-JSON has Chart.js integration through the `@ea-lab/reactive-json-chartjs` plugin.
      
      The Chart.js integration adds components such as: `BarChart`, `LineChart`, `PolarAreaChart`.
      
      The Chart.js components use a config structure similar to the Chart.js library, so the official documentation
      also applies here (as long the versions match).
      
      ## Install
      
      The demo website you currently look at has already this integration installed and ready.
      
      To enable the integration on your own project that uses Reactive-JSON, make sure
      that the integration is installed and loaded.

      Chart.js is available through the `@ea-lab/reactive-json-chartjs` plugin. To get it:

      ```shell
      npm i @ea-lab/reactive-json-chartjs
      ```

      Then make it available to ReactiveJsonRoot:

      ```js
      import {ReactiveJsonRoot} from "@ea-lab/reactive-json";
      import {mergeComponentCollections} from "@ea-lab/reactive-json";
      import {chartjsComponents} from "@ea-lab/reactive-json-chartjs";

      export const YourComponent = () => {

        const rjRootProps = {
          // Set your own props to rjRootProps such as rjBuildUrl.
          // ...
        };

        // Set the plugins prop by merging the component collections.
        // Here, we only have a single plugin, but you can add your own of course.
        rjRootProps.plugins = mergeComponentCollections([chartjsComponents]);
      
        return <ReactiveJsonRoot {...rjRootProps} />;
      }
      ```

templates:

data: { }