lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
794 lines (740 loc) • 39.4 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.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 Line' }
]
});
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 Line</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;">
Line charts display data as points connected by lines, ideal for showing trends over time.
</p>
<!-- Basic Usage -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Usage</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">
To visualize data with a line chart, use <code>type: 'line'</code>. Line charts require
both <code>start</code> and <code>value</code> (displayed as <code>--size</code>).
</p>
<!-- Tabs -->
<script>
globalThis.switchBasicLineTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`basic-line-tab-btn-${t}`);
const contentEl = document.getElementById(`basic-line-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="basic-line-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchBasicLineTab('tagged')">Tagged</button>
<button id="basic-line-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchBasicLineTab('vdom')">vDOM</button>
<button id="basic-line-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchBasicLineTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="basic-line-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 250,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart, span } = tags;
const chart = Chart({
type: 'line',
labels: true,
primaryAxis: true,
style: 'width: 100%; max-width: 600px; height: 250px; margin: 0 auto;'
},
Chart.Body({},
Chart.Row({},
Chart.Label({}, 'Jan'),
Chart.Data({ start: 0.2, value: 0.4 }, span({ class: 'data' }, '40%'))
),
Chart.Row({},
Chart.Label({}, 'Feb'),
Chart.Data({ start: 0.4, value: 0.6 }, span({ class: 'data' }, '60%'))
),
Chart.Row({},
Chart.Label({}, 'Mar'),
Chart.Data({ start: 0.6, value: 0.5 }, span({ class: 'data' }, '50%'))
),
Chart.Row({},
Chart.Label({}, 'Apr'),
Chart.Data({ start: 0.5, value: 0.8 }, span({ class: 'data' }, '80%'))
),
Chart.Row({},
Chart.Label({}, 'May'),
Chart.Data({ start: 0.8, value: 0.7 }, span({ class: 'data' }, '70%'))
)
)
);
$('#example').content(chart);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="basic-line-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 250
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart, span } = tags;
const months = [
{ label: 'Jan', start: 0.2, value: 0.4, text: '40%' },
{ label: 'Feb', start: 0.4, value: 0.6, text: '60%' },
{ label: 'Mar', start: 0.6, value: 0.5, text: '50%' },
{ label: 'Apr', start: 0.5, value: 0.8, text: '80%' },
{ label: 'May', start: 0.8, value: 0.7, text: '70%' }
];
const chart = {
tag: Chart,
attributes: {
type: 'line',
labels: true,
primaryAxis: true,
style: 'width: 100%; max-width: 600px; height: 250px; margin: 0 auto;'
},
children: [
{
tag: Chart.Body,
children: months.map(m => ({
tag: Chart.Row,
children: [
{ tag: Chart.Label, children: [m.label] },
{
tag: Chart.Data,
attributes: { start: m.start, value: m.value },
children: [{ tag: span, attributes: { class: 'data' }, children: [m.text] }]
}
]
}))
}
]
};
$('#example').content(chart);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="basic-line-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 250
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { $ } = Lightview;
const chart = {
Chart: {
type: 'line',
labels: true,
primaryAxis: true,
style: 'width: 100%; max-width: 600px; height: 250px; margin: 0 auto;',
children: [
{
'Chart.Body': {
children: [
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['Jan'] } },
{ 'Chart.Data': { start: 0.2, value: 0.4, children: [{ span: { class: 'data', children: ['40%'] } }] } }
]
}
},
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['Feb'] } },
{ 'Chart.Data': { start: 0.4, value: 0.6, children: [{ span: { class: 'data', children: ['60%'] } }] } }
]
}
},
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['Mar'] } },
{ 'Chart.Data': { start: 0.6, value: 0.5, children: [{ span: { class: 'data', children: ['50%'] } }] } }
]
}
},
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['Apr'] } },
{ 'Chart.Data': { start: 0.5, value: 0.8, children: [{ span: { class: 'data', children: ['80%'] } }] } }
]
}
},
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['May'] } },
{ 'Chart.Data': { start: 0.8, value: 0.7, children: [{ span: { class: 'data', children: ['70%'] } }] } }
]
}
}
]
}
}
]
}
};
$('#example').content(chart);</code></pre>
</div>
</div>
</div>
<!-- Multiple Datasets -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Multiple Datasets</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">
Add multiple lines by using multiple <code>Chart.Data</code> elements with
<code>multiple: true</code>.
</p>
<!-- Tabs -->
<script>
globalThis.switchMultipleLineTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`multiple-line-tab-btn-${t}`);
const contentEl = document.getElementById(`multiple-line-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="multiple-line-tab-btn-tagged" role="tab"
class="syntax-tab syntax-tab-active"
onclick="switchMultipleLineTab('tagged')">Tagged</button>
<button id="multiple-line-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchMultipleLineTab('vdom')">vDOM</button>
<button id="multiple-line-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchMultipleLineTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="multiple-line-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 280,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart } = tags;
const chart = Chart({
type: 'line',
multiple: true,
labels: true,
primaryAxis: true,
style: 'width: 100%; max-width: 600px; height: 280px; margin: 0 auto; --color-1: #4CAF50; --color-2: #2196F3; --color-3: #FF9800;'
},
Chart.Body({},
Chart.Row({},
Chart.Label({}, 'Q1'),
Chart.Data({ start: 0.2, value: 0.4 }),
Chart.Data({ start: 0.3, value: 0.5 }),
Chart.Data({ start: 0.1, value: 0.3 })
),
Chart.Row({},
Chart.Label({}, 'Q2'),
Chart.Data({ start: 0.4, value: 0.5 }),
Chart.Data({ start: 0.5, value: 0.6 }),
Chart.Data({ start: 0.3, value: 0.5 })
),
Chart.Row({},
Chart.Label({}, 'Q3'),
Chart.Data({ start: 0.5, value: 0.7 }),
Chart.Data({ start: 0.6, value: 0.4 }),
Chart.Data({ start: 0.5, value: 0.6 })
),
Chart.Row({},
Chart.Label({}, 'Q4'),
Chart.Data({ start: 0.7, value: 0.9 }),
Chart.Data({ start: 0.4, value: 0.7 }),
Chart.Data({ start: 0.6, value: 0.8 })
)
)
);
$('#example').content(chart);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="multiple-line-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 280
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart } = tags;
const quarters = [
{ label: 'Q1', data: [[0.2, 0.4], [0.3, 0.5], [0.1, 0.3]] },
{ label: 'Q2', data: [[0.4, 0.5], [0.5, 0.6], [0.3, 0.5]] },
{ label: 'Q3', data: [[0.5, 0.7], [0.6, 0.4], [0.5, 0.6]] },
{ label: 'Q4', data: [[0.7, 0.9], [0.4, 0.7], [0.6, 0.8]] }
];
const chart = {
tag: Chart,
attributes: {
type: 'line',
multiple: true,
labels: true,
primaryAxis: true,
style: 'width: 100%; max-width: 600px; height: 280px; margin: 0 auto; --color-1: #4CAF50; --color-2: #2196F3; --color-3: #FF9800;'
},
children: [
{
tag: Chart.Body,
children: quarters.map(q => ({
tag: Chart.Row,
children: [
{ tag: Chart.Label, children: [q.label] },
...q.data.map(([start, value]) => ({
tag: Chart.Data,
attributes: { start, value }
}))
]
}))
}
]
};
$('#example').content(chart);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="multiple-line-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 280
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { $ } = Lightview;
const chart = {
Chart: {
type: 'line',
multiple: true,
labels: true,
primaryAxis: true,
style: 'width: 100%; max-width: 600px; height: 280px; margin: 0 auto; --color-1: #4CAF50; --color-2: #2196F3; --color-3: #FF9800;',
children: [
{
'Chart.Body': {
children: [
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['Q1'] } },
{ 'Chart.Data': { start: 0.2, value: 0.4 } },
{ 'Chart.Data': { start: 0.3, value: 0.5 } },
{ 'Chart.Data': { start: 0.1, value: 0.3 } }
]
}
},
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['Q2'] } },
{ 'Chart.Data': { start: 0.4, value: 0.5 } },
{ 'Chart.Data': { start: 0.5, value: 0.6 } },
{ 'Chart.Data': { start: 0.3, value: 0.5 } }
]
}
},
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['Q3'] } },
{ 'Chart.Data': { start: 0.5, value: 0.7 } },
{ 'Chart.Data': { start: 0.6, value: 0.4 } },
{ 'Chart.Data': { start: 0.5, value: 0.6 } }
]
}
},
{
'Chart.Row': {
children: [
{ 'Chart.Label': { children: ['Q4'] } },
{ 'Chart.Data': { start: 0.7, value: 0.9 } },
{ 'Chart.Data': { start: 0.4, value: 0.7 } },
{ 'Chart.Data': { start: 0.6, value: 0.8 } }
]
}
}
]
}
}
]
}
};
$('#example').content(chart);</code></pre>
</div>
</div>
</div>
<!-- Axes and Grid -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Axes and Grid</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">
Add grid lines with <code>secondaryAxis</code>.
</p>
<!-- Tabs -->
<script>
globalThis.switchAxesLineTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`axes-line-tab-btn-${t}`);
const contentEl = document.getElementById(`axes-line-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="axes-line-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchAxesLineTab('tagged')">Tagged</button>
<button id="axes-line-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchAxesLineTab('vdom')">vDOM</button>
<button id="axes-line-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchAxesLineTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="axes-line-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 280,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart } = tags;
const chart = Chart({
type: 'line',
labels: true,
primaryAxis: true,
secondaryAxesCount: 10,
style: 'width: 100%; max-width: 600px; height: 280px; margin: 0 auto;'
},
Chart.Body({},
Chart.Row({}, Chart.Label({}, '1'), Chart.Data({ start: 0.1, value: 0.3 })),
Chart.Row({}, Chart.Label({}, '2'), Chart.Data({ start: 0.3, value: 0.5 })),
Chart.Row({}, Chart.Label({}, '3'), Chart.Data({ start: 0.5, value: 0.4 })),
Chart.Row({}, Chart.Label({}, '4'), Chart.Data({ start: 0.4, value: 0.7 })),
Chart.Row({}, Chart.Label({}, '5'), Chart.Data({ start: 0.7, value: 0.6 })),
Chart.Row({}, Chart.Label({}, '6'), Chart.Data({ start: 0.6, value: 0.9 }))
)
);
$('#example').content(chart);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="axes-line-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 280
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart } = tags;
const data = [
[0.1, 0.3], [0.3, 0.5], [0.5, 0.4],
[0.4, 0.7], [0.7, 0.6], [0.6, 0.9]
];
const chart = {
tag: Chart,
attributes: {
type: 'line',
labels: true,
primaryAxis: true,
secondaryAxesCount: 10,
style: 'width: 100%; max-width: 600px; height: 280px; margin: 0 auto;'
},
children: [
{
tag: Chart.Body,
children: data.map(([start, value], i) => ({
tag: Chart.Row,
children: [
{ tag: Chart.Label, children: [String(i + 1)] },
{ tag: Chart.Data, attributes: { start, value } }
]
}))
}
]
};
$('#example').content(chart);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="axes-line-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 280
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { $ } = Lightview;
const chart = {
Chart: {
type: 'line',
labels: true,
primaryAxis: true,
secondaryAxesCount: 10,
style: 'width: 100%; max-width: 600px; height: 280px; margin: 0 auto;',
children: [
{
'Chart.Body': {
children: [
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['1'] } }, { 'Chart.Data': { start: 0.1, value: 0.3 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['2'] } }, { 'Chart.Data': { start: 0.3, value: 0.5 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['3'] } }, { 'Chart.Data': { start: 0.5, value: 0.4 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['4'] } }, { 'Chart.Data': { start: 0.4, value: 0.7 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['5'] } }, { 'Chart.Data': { start: 0.7, value: 0.6 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['6'] } }, { 'Chart.Data': { start: 0.6, value: 0.9 } }] } }
]
}
}
]
}
};
$('#example').content(chart);</code></pre>
</div>
</div>
</div>
<!-- Line Styling -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Line Styling</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">
Customize line appearance with CSS custom properties.
</p>
<!-- Tabs -->
<script>
globalThis.switchStyledLineTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`styled-line-tab-btn-${t}`);
const contentEl = document.getElementById(`styled-line-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="styled-line-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchStyledLineTab('tagged')">Tagged</button>
<button id="styled-line-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchStyledLineTab('vdom')">vDOM</button>
<button id="styled-line-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchStyledLineTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="styled-line-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 250,
autoRun: true
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart } = tags;
const chart = Chart({
type: 'line',
labels: true,
style: 'width: 100%; max-width: 600px; height: 250px; margin: 0 auto; --color: #7480ff; --line-size: 3px;'
},
Chart.Body({},
Chart.Row({}, Chart.Label({}, 'Jan'), Chart.Data({ start: 0.3, value: 0.5 })),
Chart.Row({}, Chart.Label({}, 'Feb'), Chart.Data({ start: 0.5, value: 0.7 })),
Chart.Row({}, Chart.Label({}, 'Mar'), Chart.Data({ start: 0.7, value: 0.6 })),
Chart.Row({}, Chart.Label({}, 'Apr'), Chart.Data({ start: 0.6, value: 0.9 })),
Chart.Row({}, Chart.Label({}, 'May'), Chart.Data({ start: 0.9, value: 0.8 }))
)
);
$('#example').content(chart);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="styled-line-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 250
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart } = tags;
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May'];
const data = [[0.3, 0.5], [0.5, 0.7], [0.7, 0.6], [0.6, 0.9], [0.9, 0.8]];
const chart = {
tag: Chart,
attributes: {
type: 'line',
labels: true,
style: 'width: 100%; max-width: 600px; height: 250px; margin: 0 auto; --color: #7480ff; --line-size: 3px;'
},
children: [
{
tag: Chart.Body,
children: months.map((month, i) => ({
tag: Chart.Row,
children: [
{ tag: Chart.Label, children: [month] },
{ tag: Chart.Data, attributes: { start: data[i][0], value: data[i][1] } }
]
}))
}
]
};
$('#example').content(chart);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="styled-line-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 250
});
</script><code contenteditable="true">await import('/components/data-display/chart.js');
const { $ } = Lightview;
const chart = {
Chart: {
type: 'line',
labels: true,
style: 'width: 100%; max-width: 600px; height: 250px; margin: 0 auto; --color: #7480ff; --line-size: 3px;',
children: [
{
'Chart.Body': {
children: [
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Jan'] } }, { 'Chart.Data': { start: 0.3, value: 0.5 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Feb'] } }, { 'Chart.Data': { start: 0.5, value: 0.7 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Mar'] } }, { 'Chart.Data': { start: 0.7, value: 0.6 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Apr'] } }, { 'Chart.Data': { start: 0.6, value: 0.9 } }] } },
{ 'Chart.Row': { children: [{ 'Chart.Label': { children: ['May'] } }, { 'Chart.Data': { start: 0.9, value: 0.8 } }] } }
]
}
}
]
}
};
$('#example').content(chart);</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>