Basic Renderer

The renderer is used to draw all elements of the chart, including axes, series, and text. It is implemented as a callback providing a context object. Depending on your setup you can create the renderer:

plain js

const gpuChart = new GpuChart();
// bind the chart a <canvas> element
gpuChart.bind(document.getElementById('MyCanvas'));
gpuChart.setMaxFrameRate(2); // Hz
gpuChart.setRenderCallback((context) => {
    // render the chart here
}

VUE

<script setup lang="ts">
import { EventDispatcher, LayoutCell } from '@tomsoftware/webgl-chart'
import { Chart, ChartConfig } from '@tomsoftware/webgl-chart-vue'

// setup data and layout
const baseContainer = new LayoutCell();
const eventDispatcher = new EventDispatcher();

const chartData = new ChartConfig()
  .setRenderCallback((context) => {
      // process events
      eventDispatcher.dispatch(context);
      // render the chart here
  });

// config chart
chartData.setMaxFrameRate(12); // Hz

// event that is fired when the canvas and the 3d context is created
function onBind(element: HTMLElement | null): void {
  eventDispatcher.bind(element)
}

</script>

<template>
  <chart :data="chartData" @on-bind="onBind" />
</template>

React

import './App.css'
import { EventDispatcher, LayoutCell } from '@tomsoftware/webgl-chart';
import { Chart, ChartConfig} from '@tomsoftware/webgl-chart-react';

function App() {
  // setup data and layout
  const baseContainer = new LayoutCell();
  const eventDispatcher = new EventDispatcher();

  // create chart
  const chartData = new ChartConfig()
    .setRenderCallback((context) => {
        // process events
        eventDispatcher.dispatch(context);
        // render the chart here
    });

  // config chart
  chartData.setMaxFrameRate(10);

  // event that is fired when the canvas and the 3d context is created
  function onBind(element: HTMLElement | null): void {
    eventDispatcher.bind(element)
  }

  return (
    <>
      <Chart data={chartData} onBind={onBind} />
    </>
  )
}

export default App