graphieros/vue-data-ui v3.21.0 on GitHub

VueUiXy

Add support for ssr static svg rendering.

The render function returns an svg that can be embedded, or injected into HTML.

import { createStaticVueUiXy } from 'vue-data-ui/ssr';

const svgRender = ref('');

watchEffect(async () => {
    svgRender.value = await createStaticVueUiXy({
        dataset: dataset.value, // VueUiXyDatasetItem[]
        config: config.value, // VueUiXyConfig
        additionalSvgContent: ({ series, drawingArea }) => {
            // custom additional content
            return series
                .map((s) => {
                    const lastPlot = s.plots.at(-1);
                    if (!lastPlot) return '';
                    return `
                    <text
                        x="${lastPlot.x}"
                        y="${lastPlot.y}"
                        font-size="25"
                        fill="red"
                        text-anchor="start"
                    >
                        ${lastPlot.value}
                    </text>
                `;
                })
                .join('');
        },
    });
});

This will be rolled out gradually for other main components of the library.
Examples will be provided soon in the docs.