Skip to content

πŸ“ˆ The fastest plotting library on the block πŸš€

Notifications You must be signed in to change notification settings

chartium/libchartium

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“ˆ libchartium πŸš€

The documentation is getting ready, please check back soon!

Installation

npm add libchartium unitlib fraction.js
# or
pnpm add libchartium unitlib fraction.js
# or
bun add libchartium unitlib fraction.js

You will also need to make sure that your bundler can import WebAssembly as ES modules according to the ESM integration proposal. For Vite that means you need to add vite-plugin-wasm, for Rollup it's @rollup/plugin-wasm. In Webpack you'll have to allow asyncWebAssembly in the config.

Example

<script lang="ts">
  import { TraceList, ChartComponent as Chart, NumericDateRepresentation } from 'libchartium';

  const from = +new Date();
	const numSteps = 10_000;
	const stepSize = 100_000;
	const to = from + numSteps * stepSize;

  const xs = Array.from(
    { length: numSteps },
    (_, index) => from + index * stepSize,
  );

  const ys = Array.from({ length: 100 }, (_, idx) => ({
    id: `trace_${idx}`,
    data: Float32Array.from(
      xs.map((x) => 100 + 100 * Math.sin((x / (from - to)) * 2 * Math.PI + idx)),
    ),
  }));

  const traces = TraceList.fromColumns({
    x: {
      type: "f32",
      data: Float32Array.from(xs),
			unit: NumericDateRepresentation.EpochMilliseconds()
    },
    y: {
      type: "f32",
      columns: ys,
    },
    style: {
      "*": { "line-width": 2 },
      trace_0: { color: "red" },
    },
  });
</script>
<Chart {controller} {traces} />