Chart

A chart Node that imports ChartJS and uses it to render a nice bar chart.

Features used in this example:

• NPM imports.
• View rendering using various frameworks.

Example

Vanilla

A chart node without using any external libraries.

 

manifest.yaml

name: ChartJS
description: Chart powered by ChartJS!

properties.yaml

view:
  datatype: web-view

src/main.jsx

import Chart from 'chart.js/auto';

function renderChart(canvas) {
  new Chart(canvas, {
    type: 'bar',
    data: {
      labels: ['S', 'M', 'T', 'W', 'T', 'F'],
      datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1,
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: false,
        },
      },
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
}

function render(element) {
  const canvas = document.createElement('canvas');

  element.appendChild(canvas);
  renderChart(canvas);
}

context.set('view', render);

React

A chart node using React.

 

manifest.yaml

name: ChartJS
description: Chart powered by ChartJS!

properties.yaml

view:
  datatype: web-view

src/ReactComponent.tsx

import Chart from 'chart.js/auto';
import react from 'react';
import * as reactDom from 'react-dom/client';
import { setup } from 'openexus/react';

setup(context, react, reactDom);

const { useRef, useEffect } = react;

function ReactComponent() {
  const mountingEl = useRef(null);
  useEffect(() => {
    new Chart(mountingEl.current, {
      type: 'bar',
      data: {
        labels: ['S', 'M', 'T', 'W', 'T', 'F'],
        datasets: [
          {
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
          },
        ],
      },
      options: {
        plugins: {
          legend: {
            display: false,
          },
        },
        scales: {
          y: {
            beginAtZero: true,
          },
        },
      },
    });
  }, []);

  return <canvas ref={mountingEl} />;
}

context.set('view', ReactComponent);

Vue

A chart node using Vue.

 

manifest.yaml

name: ChartJS
description: Chart powered by ChartJS!

properties.yaml

view:
  datatype: web-view

src/main.tsx

import * as vue from 'vue';
import { setup } from 'openexus/vue';
import VueComponent from './VueComponent.vue';

setup(context, vue);

context.set('view', VueComponent);

src/VueComponent.vue

<script setup>
  import { ref, onMounted } from 'vue'
  import Chart from 'chart.js/auto';

  const chartEl = ref(null);

  onMounted(() => {
    new Chart(chartEl.value, {
      type: 'bar',
      data: {
        labels: ['S', 'M', 'T', 'W', 'T', 'F'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  });
</script>

<template>
  <canvas ref="chartEl" />
</template>

Svelte

A chart node using Svelte.

 

manifest.yaml

name: ChartJS
description: Chart powered by ChartJS!

properties.yaml

view:
  datatype: web-view

src/main.tsx

import * as svelteStore from 'svelte/store';
import * as svelte from 'svelte';
import { setup } from 'openexus/svelte';
import SvelteComponent from './SvelteComponent.svelte';

setup(context, svelte, svelteStore);

context.set('view', SvelteComponent);

src/SvelteComponent.svelte

<script>
  import { onMount } from 'svelte';
  import Chart from 'chart.js/auto';

  let chartEl;

  onMount(() => {
    new Chart(chartEl, {
      type: 'bar',
      data: {
        labels: ['S', 'M', 'T', 'W', 'T', 'F'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  });
</script>

<canvas bind:this={chartEl} />

Solid

A chart node using Solid.

 

manifest.yaml

name: ChartJS
description: Chart powered by ChartJS!

properties.yaml

view:
  datatype: web-view

src/SolidComponent.tsx

import Chart from 'chart.js/auto';
import * as solidWeb from 'solid-js/web';
import * as solid from 'solid-js';
import { setup } from 'openexus/solid';

setup(context, solid, solidWeb);

const { onMount } = solid;

function renderChart(canvas) {
  new Chart(canvas, {
    type: 'bar',
    data: {
      labels: ['S', 'M', 'T', 'W', 'T', 'F'],
      datasets: [
        {
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1,
        },
      ],
    },
    options: {
      plugins: {
        legend: {
          display: false,
        },
      },
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });
}

function SolidComponent() {
  let canvas;

  onMount(() => {
    renderChart(canvas);
  });

  return <canvas ref={canvas} />;
}

context.set('view', SolidComponent);