Chart Line

Line charts display data as points connected by lines, ideal for showing trends over time.

Basic Usage

To visualize data with a line chart, use type: 'line'. Line charts require both start and value (displayed as --size). 

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);
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);
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);

Multiple Datasets

Add multiple lines by using multiple Chart.Data elements with multiple: 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);
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);
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);

Axes and Grid

Add grid lines with secondaryAxis. 

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);
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);
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);

Line Styling

Customize line appearance with CSS custom properties. 

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);
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);
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);