Visualizing data in FlowerShow
Flowershow allows you to easily embed data visualization components into your FlowerShow app. There's no need for coding or manual embedding of charts and tables; you can effortlessly include them in your document using a straightforward syntax. Components can be added by either providing inline data or referencing external data files.
For example, a chart like the one below:
<LineChart data={ [ ["1850",-0.41765878], ["1851",-0.2333498], ["1852",-0.22939907], ["1853",-0.27035445], ["1854",-0.29163003], ["1855",-0.18050575], ["1856",-0.15524832], ["1857",-0.2417654], ["1858",-0.35097656], ["1859",-0.27654367], ["1860",-0.20564236], ["1861",-0.15032158], ["1862",-0.12354097], ["1863",-0.09876543], ["1864",-0.06789012], ["1865",-0.03578976], ["1866",0.01234567], ["1867",0.04567892], ["1868",0.01890123], ["1869",0.12345678], ["1870",0.16789012], ["1871",0.17789012], ["1871",0.18789012], ] } />
will be displayed as:
To use the @portaljs/component
in FlowerShow, follow these steps:
-
Run the following command to install the
@portaljs/components
package:npm install @portaljs/components
-
Import the component in the
components/MdxPage.tsx
file using dynamic import:import dynamic from "next/dynamic"; const LineChart = dynamic( async () => { return (await import("@portaljs/components")).LineChart; }, { ssr: false } );
-
Add the imported component to the
components
constant:const components = { LineChart: LineChart, // Other components };
-
Now, you can use the
LineChart
component in your.md
file as usual.
For a comprehensive list and API documentation of available data visualization components, please visit PortalJS Storybook.