Vega-Lite tile for usage with Svelte layout engine tilez.
Install tilez-vega-lite as npm package via
npm install tilez-vega-lite
You can use Vega-Lite tile for tile types 'html'
and 'svg'
. Component VegaLiteTile has following props:
When no data is given, Vega-Lite spec must have inline data.
<script lang="ts">
import { Tile } from 'tilez';
import { VegaLiteTile } from 'tilez-vega-lite';
const spec = {
mark: 'bar',
encoding: {
x: { field: 'a', type: 'nominal', axis: { labelAngle: 0 } },
y: { field: 'b', type: 'quantitative' }
}
};
const data = [
{ a: 'A', b: 28 },
{ a: 'B', b: 55 },
{ a: 'C', b: 43 },
{ a: 'D', b: 91 },
{ a: 'E', b: 81 },
{ a: 'F', b: 53 },
{ a: 'G', b: 19 },
{ a: 'H', b: 87 },
{ a: 'I', b: 52 }
];
const options = {
renderer: 'svg',
actions: false
};
</script>
<Tile type="html" width="800px" height="600px">
<VegaLiteTile {spec} {data} {options} />
</Tile>
Underlying VegaLite class can also be used for server side rendering without tilez, see ssr
route in example app.