chartout

Print Your Insights, Anytime, Anywhere

With every purchase, ChartOut donates to NumFOCUS to support the open-source ecosystem behind your charts.

ChartOut turns data visualisations into physical products. You pass a chart; the widget lets the user preview it on a 3D product model, adjust the placement, and check out.

JavaScript

npm install chartout

import { createChartoutModel } from 'chartout';
import { openWithViz, openWithItem, openWithCart, svgToBytes } from 'chartout/store';

const model = createChartoutModel({});

// Raw chart, user picks product inside the store
await openWithViz(model, mugSvg, 'Histogram');

// Pre-selected product
await openWithItem(model, 'canvas_10x10', canvasSvg, 'Scatter density');

// Pre-built cart
const [canvasBytes, mugBytes, mousepadBytes] = await Promise.all([
  svgToBytes(canvasSvg), svgToBytes(mugSvg), svgToBytes(mousepadSvg),
]);
openWithCart(model, [
  { id: 'canvas_10x10',       name: 'Canvas (10x10)',  quantity: 1, placements: [{ id: 'default', content: canvasBytes   }] },
  { id: 'mug_black_11oz',     name: 'Mug (11 oz)',     quantity: 1, placements: [{ id: 'default', content: mugBytes      }] },
  { id: 'mousepad_white_8x7', name: 'Mousepad (8x7)',  quantity: 2, placements: [{ id: 'default', content: mousepadBytes }] },
]);

Rendering

React - use chartout/react:

import { ChartoutWidget } from 'chartout/react';

<ChartoutWidget model={model} style={{ width: '100%' }} />

Vanilla JS / Vue / Svelte - use chartout/mount:

import { mount } from 'chartout/mount';

const { destroy } = mount(document.getElementById('store'), { model });

See the JavaScript reference implementation for a full working example.

Python / Jupyter

For use in Jupyter notebooks, see the chartout Python package:

pip install chartout

import altair as alt
import chartout

chart = alt.Chart(data).mark_point().encode(x='x', y='y')

store = chartout.Store(chart)   # raw chart, user picks product
# store = chartout.Store(item)    # pre-selected product
# store = chartout.Store(cart)    # pre-built cart
store  # renders the interactive widget in Jupyter

JSPM

chartout

Package Exports

Readme

chartout

JavaScript

Rendering

Links

Python / Jupyter