lightview 1.8.1-b → 2.0.0

package/docs/components/chart.html

@@ -0,0 +1,612 @@
+<!-- SEO-friendly SPA Shim -->
+<script src="/lightview-router.js"></script>
+<script>
+    if (window.LightviewRouter) {
+        LightviewRouter.base('/index.html');
+    }
+</script>
+<script type="module" src="../../components/data-display/chart.js"></script>
+
+<!-- Load the page-specific stylesheet -->
+<link rel="stylesheet" href="./index.css">
+
+<!-- Gallery Structure -->
+<div class="gallery-page">
+    <div class="gallery-layout">
+        <!-- Sidebar Overlay -->
+        <div id="sidebar-overlay" class="sidebar-overlay"></div>
+
+        <!-- Sidebar -->
+        <div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
+
+        <!-- Main Content -->
+        <div id="gallery-main" class="gallery-main">
+            <!-- Header Container -->
+            <div
+                style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
+                <!-- Breadcrumbs Row -->
+                <div style="padding: 0.75rem 1.5rem 0;">
+                    <script>
+                        (() => {
+                            const { Breadcrumbs } = Lightview.tags;
+                            const breadcrumbs = Breadcrumbs({
+                                id: 'page-breadcrumbs',
+                                items: [
+                                    { label: 'Components', href: '/docs/components' },
+                                    { label: 'Chart' }
+                                ]
+                            });
+                            document.currentScript.replaceWith(breadcrumbs.domEl);
+                        })();
+                    </script>
+                </div>
+                <!-- Title Row -->
+                <div class="gallery-header"
+                    style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
+                    <button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
+                            style="stroke: currentColor; stroke-width: 2;">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
+                        </svg>
+                    </button>
+                    <h1 class="gallery-title">Chart</h1>
+                </div>
+            </div>
+
+            <!-- Content -->
+            <div class="gallery-content">
+                <div class="section-content" style="max-width: 1000px;">
+                    <p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
+                        Data visualization components powered by <a href="https://chartscss.org/" target="_blank"
+                            class="link link-primary">Charts.css</a>.
+                        Use CSS classes to turn your data into beautiful charts.
+                    </p>
+
+
+
+
+
+                    <!-- Bar Chart -->
+                    <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                        Bar Chart
+                        <a href="/docs/components/chart-bar" class="info-link" aria-label="View Bar Chart Details">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
+                                style="stroke: currentColor; stroke-width: 2;">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                        </a>
+                    </h2>
+                    <div class="card bg-base-100 shadow-sm mb-8">
+                        <div class="card-body">
+                            <div id="bar-chart-container" style="width: 100%; max-width: 600px; margin: 0 auto;">
+                                <table
+                                    class="charts-css bar show-labels show-data-on-hover show-primary-axis data-spacing-5">
+                                    <caption>Front-end Frameworks</caption>
+                                    <thead>
+                                        <tr>
+                                            <th scope="col"> Framework </th>
+                                            <th scope="col"> Progress </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <th scope="row"> React </th>
+                                            <td style="--size: 0.8;"> <span class="data"> 80% </span> <span
+                                                    class="tooltip"> React:
+                                                    80% </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> Vue </th>
+                                            <td style="--size: 0.6;"> <span class="data"> 60% </span> <span
+                                                    class="tooltip"> Vue:
+                                                    60% </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> Svelte </th>
+                                            <td style="--size: 0.4;"> <span class="data"> 40% </span> <span
+                                                    class="tooltip"> Svelte:
+                                                    40% </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> Lightview </th>
+                                            <td style="--size: 1.0; --color: #7480ff;"> <span class="data"> 100% </span>
+                                                <span class="tooltip"> Lightview: 100% </span>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="mt-4">
+                                <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'bar', labels: true, dataOnHover: true, primaryAxis: true, spacing: 5, heading: 'Front-end Frameworks' },
+    /* Head is for screen reader use and is not visible */
+    Chart.Head({},
+        Chart.Row({},
+            Chart.Label({ scope: 'col' }, 'Framework'),
+            Chart.Label({ scope: 'col' }, 'Progress')
+        )
+    ),
+    Chart.Body({},
+        Chart.Row({},
+            Chart.Label({}, 'React'),
+            Chart.Data({ value: 0.8, tooltip: 'React: 80%' }, $('span', { class: 'data' }, '80%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'Vue'),
+            Chart.Data({ value: 0.6, tooltip: 'Vue: 60%' }, $('span', { class: 'data' }, '60%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'Svelte'),
+            Chart.Data({ value: 0.4, tooltip: 'Svelte: 40%' }, $('span', { class: 'data' }, '40%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'Lightview'),
+            Chart.Data({ value: 1.0, color: '#7480ff', tooltip: 'Lightview: 100%' }, $('span', { class: 'data' }, '100%'))
+        )
+    )
+)</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Column Chart -->
+                    <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                        Column Chart
+                        <a href="/docs/components/chart-column" class="info-link"
+                            aria-label="View Column Chart Details">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
+                                style="stroke: currentColor; stroke-width: 2;">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                        </a>
+                    </h2>
+                    <div class="card bg-base-100 shadow-sm mb-8">
+                        <div class="card-body">
+                            <div id="column-chart-container"
+                                style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
+                                <table
+                                    class="charts-css column show-labels show-primary-axis data-spacing-10 show-heading">
+                                    <caption>Monthly Revenue</caption>
+                                    <thead>
+                                        <tr>
+                                            <th scope="col"> Month </th>
+                                            <th scope="col"> Revenue </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <th scope="row"> Jan </th>
+                                            <td style="--size: 0.2;"> <span class="data"> $20K </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> Feb </th>
+                                            <td style="--size: 0.4;"> <span class="data"> $40K </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> Mar </th>
+                                            <td style="--size: 0.6;"> <span class="data"> $60K </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> Apr </th>
+                                            <td style="--size: 0.8;"> <span class="data"> $80K </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> May </th>
+                                            <td style="--size: 0.5;"> <span class="data"> $50K </span> </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="mt-4">
+                                <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'column', labels: true, primaryAxis: true, spacing: 10, heading: 'Monthly Revenue' },
+    /* Head is for screen reader use and is not visible */
+    Chart.Head({},
+        Chart.Row({},
+            Chart.Label({ scope: 'col' }, 'Month'),
+            Chart.Label({ scope: 'col' }, 'Revenue')
+        )
+    ),
+    Chart.Body({},
+        Chart.Row({},
+            Chart.Label({}, 'Jan'),
+            Chart.Data({ value: 0.2 }, $('span', { class: 'data' }, '$20K'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'Feb'),
+            Chart.Data({ value: 0.4 }, $('span', { class: 'data' }, '$40K'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'Mar'),
+            Chart.Data({ value: 0.6 }, $('span', { class: 'data' }, '$60K'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'Apr'),
+            Chart.Data({ value: 0.8 }, $('span', { class: 'data' }, '$80K'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'May'),
+            Chart.Data({ value: 0.5 }, $('span', { class: 'data' }, '$50K'))
+        )
+    )
+)</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Line Chart -->
+                    <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                        Line Chart
+                        <a href="/docs/components/chart-line" class="info-link" aria-label="View Line Chart Details">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
+                                style="stroke: currentColor; stroke-width: 2;">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                        </a>
+                    </h2>
+                    <div class="card bg-base-100 shadow-sm mb-8">
+                        <div class="card-body">
+                            <div id="line-chart-container"
+                                style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
+                                <table
+                                    class="charts-css line show-heading show-labels show-primary-axis show-10-secondary-axes">
+                                    <caption>Growth Trajectory</caption>
+                                    <thead>
+                                        <tr>
+                                            <th scope="col"> Year </th>
+                                            <th scope="col"> Value </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <th scope="row"> 2018 </th>
+                                            <td style="--start: 0.1; --size: 0.3;"> <span class="data"> 30% </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> 2019 </th>
+                                            <td style="--start: 0.3; --size: 0.5;"> <span class="data"> 50% </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> 2020 </th>
+                                            <td style="--start: 0.5; --size: 0.4;"> <span class="data"> 40% </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> 2021 </th>
+                                            <td style="--start: 0.4; --size: 0.8;"> <span class="data"> 80% </span>
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> 2022 </th>
+                                            <td style="--start: 0.8; --size: 0.9;"> <span class="data"> 90% </span>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="mt-4">
+                                <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'line', heading: 'Growth Trajectory', labels: true, primaryAxis: true, secondaryAxis: true },
+    /* Head is for screen reader use and is not visible */
+    Chart.Head({},
+        Chart.Row({},
+            Chart.Label({ scope: 'col' }, 'Year'),
+            Chart.Label({ scope: 'col' }, 'Value')
+        )
+    ),
+    Chart.Body({},
+        Chart.Row({},
+            Chart.Label({}, '2018'),
+            Chart.Data({ start: 0.1, value: 0.3 }, $('span', { class: 'data' }, '30%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, '2019'),
+            Chart.Data({ start: 0.3, value: 0.5 }, $('span', { class: 'data' }, '50%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, '2020'),
+            Chart.Data({ start: 0.5, value: 0.4 }, $('span', { class: 'data' }, '40%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, '2021'),
+            Chart.Data({ start: 0.4, value: 0.8 }, $('span', { class: 'data' }, '80%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, '2022'),
+            Chart.Data({ start: 0.8, value: 0.9 }, $('span', { class: 'data' }, '90%'))
+        )
+    )
+)</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Area Chart -->
+                    <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                        Area Chart
+                        <a href="/docs/components/chart-area" class="info-link" aria-label="View Area Chart Details">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
+                                style="stroke: currentColor; stroke-width: 2;">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                        </a>
+                    </h2>
+                    <div class="card bg-base-100 shadow-sm mb-8">
+                        <div class="card-body">
+                            <div id="area-chart-container"
+                                style="width: 100%; max-width: 600px; height: 300px; margin: 0 auto;">
+                                <table class="charts-css area show-labels show-primary-axis">
+                                    <caption>Server Load</caption>
+                                    <thead>
+                                        <tr>
+                                            <th scope="col"> Time </th>
+                                            <th scope="col"> Load </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <th scope="row"> 00:00 </th>
+                                            <td style="--start: 0.2; --size: 0.4;"></td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> 04:00 </th>
+                                            <td style="--start: 0.4; --size: 0.8;"></td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> 08:00 </th>
+                                            <td style="--start: 0.8; --size: 0.6;"></td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> 12:00 </th>
+                                            <td style="--start: 0.6; --size: 0.9;"></td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> 16:00 </th>
+                                            <td style="--start: 0.9; --size: 0.5;"></td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="mt-4">
+                                <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'area', labels: true, primaryAxis: true, heading: 'Server Load' },
+    /* Head is for screen reader use and is not visible */
+    Chart.Head({},
+        Chart.Row({},
+            Chart.Label({ scope: 'col' }, 'Time'),
+            Chart.Label({ scope: 'col' }, 'Load')
+        )
+    ),
+    Chart.Body({},
+        Chart.Row({},
+            Chart.Label({}, '00:00'),
+            Chart.Data({ start: 0.2, value: 0.4 })
+        ),
+        Chart.Row({},
+            Chart.Label({}, '04:00'),
+            Chart.Data({ start: 0.4, value: 0.8 })
+        ),
+        Chart.Row({},
+            Chart.Label({}, '08:00'),
+            Chart.Data({ start: 0.8, value: 0.6 })
+        ),
+        Chart.Row({},
+            Chart.Label({}, '12:00'),
+            Chart.Data({ start: 0.6, value: 0.9 })
+        ),
+        Chart.Row({},
+            Chart.Label({}, '16:00'),
+            Chart.Data({ start: 0.9, value: 0.5 })
+        )
+    )
+)</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Pie Chart -->
+                    <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
+                        Pie Chart
+                        <a href="/docs/components/chart-pie" class="info-link" aria-label="View Pie Chart Details">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="info-icon"
+                                style="stroke: currentColor; stroke-width: 2;">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                            </svg>
+                        </a>
+                    </h2>
+                    <div class="card bg-base-100 shadow-sm mb-8">
+                        <div class="card-body">
+                            <div id="pie-chart-container"
+                                style="width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1 / 1;">
+                                <table class="charts-css pie show-labels data-spacing-2">
+                                    <caption>Browser Market Share</caption>
+                                    <thead>
+                                        <tr>
+                                            <th scope="col"> Browser </th>
+                                            <th scope="col"> Share </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <th scope="row"> Chrome </th>
+                                            <td style="--start: 0.0; --end: 0.6; --color: #4CAF50;"> <span class="data">
+                                                    60%
+                                                </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> Firefox </th>
+                                            <td style="--start: 0.6; --end: 0.85; --color: #F44336;"> <span
+                                                    class="data"> 25%
+                                                </span> </td>
+                                        </tr>
+                                        <tr>
+                                            <th scope="row"> Safari </th>
+                                            <td style="--start: 0.85; --end: 1.0; --color: #2196F3;"> <span
+                                                    class="data"> 15%
+                                                </span> </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <p class="text-sm opacity-70 mt-4">
+                                <strong>Note:</strong> For Pie charts, use <code>--start</code> and <code>--end</code>
+                                (not <code>--size</code>).
+                                Each segment's <code>--start</code> should equal the previous segment's
+                                <code>--end</code>.
+                                The <code>--end</code> value is <code>--start</code> plus the segment's proportion (0.0
+                                to 1.0).
+                            </p>
+                            <div class="mt-4">
+                                <pre class="bg-base-300 p-4 rounded-lg text-sm overflow-x-auto"><code>Chart({ type: 'pie', labels: true, spacing: 2, heading: 'Browser Market Share' },
+    Chart.Body({},
+        Chart.Row({},
+            Chart.Label({}, 'Chrome'),
+            Chart.Data({ start: 0.0, end: 0.6, color: '#4CAF50' }, $('span', { class: 'data' }, '60%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'Firefox'),
+            Chart.Data({ start: 0.6, end: 0.85, color: '#F44336' }, $('span', { class: 'data' }, '25%'))
+        ),
+        Chart.Row({},
+            Chart.Label({}, 'Safari'),
+            Chart.Data({ start: 0.85, end: 1.0, color: '#2196F3' }, $('span', { class: 'data' }, '15%'))
+        )
+    )
+)</code></pre>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Props Table -->
+                    <h2 class="text-xl font-bold mb-4">Props</h2>
+                    <div class="overflow-x-auto mb-8">
+                        <table class="table table-zebra">
+                            <thead>
+                                <tr>
+                                    <th>Prop</th>
+                                    <th>Type</th>
+                                    <th>Default</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td><code>type</code></td>
+                                    <td>string</td>
+                                    <td>'bar'</td>
+                                    <td>Type of chart: 'bar', 'column', 'line', 'area', 'pie'</td>
+                                </tr>
+                                <tr>
+                                    <td><code>heading</code></td>
+                                    <td>string</td>
+                                    <td>-</td>
+                                    <td>Caption for the chart table</td>
+                                </tr>
+                                <tr>
+                                    <td><code>labels</code></td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Show axis labels (.show-labels)</td>
+                                </tr>
+                                <tr>
+                                    <td><code>dataOnHover</code></td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Show data tooltip on hover (.show-data-on-hover)</td>
+                                </tr>
+                                <tr>
+                                    <td><code>primaryAxis</code></td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Show primary axis lines (.show-primary-axis)</td>
+                                </tr>
+                                <tr>
+                                    <td><code>secondaryAxis</code></td>
+                                    <td>boolean|string</td>
+                                    <td>false</td>
+                                    <td>Show secondary axes lines (.show-10-secondary-axes or custom class)</td>
+                                </tr>
+                                <tr>
+                                    <td><code>spacing</code></td>
+                                    <td>number</td>
+                                    <td>-</td>
+                                    <td>Gap between data points (1-20) (.data-spacing-N)</td>
+                                </tr>
+                                <tr>
+                                    <td><code>reverse</code></td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Reverse chart orientation (.reverse)</td>
+                                </tr>
+                                <tr>
+                                    <td><code>multiple</code></td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Enable multiple datasets mode (.multiple)</td>
+                                </tr>
+                                <tr>
+                                    <td><code>stacked</code></td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Enable stacked mode for bar/column charts (.stacked)</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <h3 class="text-lg font-bold mb-4">Chart.Data Props</h3>
+                    <p class="mb-4 opacity-70">Properties available for the <code>Chart.Data</code> subcomponent.</p>
+                    <div class="overflow-x-auto mb-8">
+                        <table class="table table-zebra">
+                            <thead>
+                                <tr>
+                                    <th>Prop</th>
+                                    <th>Type</th>
+                                    <th>Description</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td><code>value</code> (or <code>size</code>)</td>
+                                    <td>number</td>
+                                    <td>Value of the data point (0.0 - 1.0). Maps to <code>--size</code>. <strong>Use
+                                            for bar,
+                                            column, line, and area charts.</strong></td>
+                                </tr>
+                                <tr>
+                                    <td><code>start</code></td>
+                                    <td>number</td>
+                                    <td>Start position (0.0 - 1.0). Used for stacked bars, line/area charts, and pie
+                                        segments.
+                                        Maps to
+                                        <code>--start</code>.
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td><code>end</code></td>
+                                    <td>number</td>
+                                    <td>End position (0.0 - 1.0). Maps to <code>--end</code>. <strong>Required for pie
+                                            charts instead of <code>value</code>.</strong></td>
+                                </tr>
+                                <tr>
+                                    <td><code>color</code></td>
+                                    <td>string</td>
+                                    <td>CSS color value for the data segment. Maps to <code>--color</code>.</td>
+                                </tr>
+                                <tr>
+                                    <td><code>tooltip</code></td>
+                                    <td>string</td>
+                                    <td>Text to display in the standard tooltip span.</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>