Chart Bar

Bar charts display data as horizontal bars. The bar length represents the data value.

Basic Usage

To visualize data with a bar chart, use type: 'bar'. 

await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart, span } = tags;

const chart = Chart({ 
    type: 'bar', 
    labels: true,
    style: 'width: 100%; max-width: 600px; margin: 0 auto;' 
},
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Item 1'),
            Chart.Data({ value: 0.4 }, span({ class: 'data' }, '40%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Item 2'),
            Chart.Data({ value: 0.6 }, span({ class: 'data' }, '60%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Item 3'),
            Chart.Data({ value: 0.8 }, span({ class: 'data' }, '80%'))
        )
    )
);

$('#example').content(chart);
await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart, span } = tags;

const items = [
    { label: 'Item 1', value: 0.4, text: '40%' },
    { label: 'Item 2', value: 0.6, text: '60%' },
    { label: 'Item 3', value: 0.8, text: '80%' }
];

const chart = {
    tag: Chart,
    attributes: { type: 'bar', labels: true, style: 'width: 100%; max-width: 600px; margin: 0 auto;' },
    children: [
        {
            tag: Chart.Body,
            children: items.map(item => ({
                tag: Chart.Row,
                children: [
                    { tag: Chart.Label, children: [item.label] },
                    { 
                        tag: Chart.Data, 
                        attributes: { value: item.value },
                        children: [{ tag: span, attributes: { class: 'data' }, children: [item.text] }]
                    }
                ]
            }))
        }
    ]
};

$('#example').content(chart);
await import('/components/data-display/chart.js');
const { $ } = Lightview;

const chart = {
    Chart: {
        type: 'bar',
        labels: true,
        style: 'width: 100%; max-width: 600px; margin: 0 auto;',
        children: [
            {
                'Chart.Body': {
                    children: [
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Item 1'] } },
                                    { 'Chart.Data': { value: 0.4, children: [{ span: { class: 'data', children: ['40%'] } }] } }
                                ]
                            }
                        },
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Item 2'] } },
                                    { 'Chart.Data': { value: 0.6, children: [{ span: { class: 'data', children: ['60%'] } }] } }
                                ]
                            }
                        },
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Item 3'] } },
                                    { 'Chart.Data': { value: 0.8, children: [{ span: { class: 'data', children: ['80%'] } }] } }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
};

$('#example').content(chart);

Multiple Datasets

Add multiple Chart.Data elements per row and set multiple: true. 

await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart, span } = tags;

const chart = Chart({ 
    type: 'bar', 
    multiple: true,
    labels: true, 
    primaryAxis: true,
    primaryAxis: true,
    style: 'width: 100%; max-width: 600px; margin: 0 auto;' 
},
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Q1'),
            Chart.Data({ value: 0.3, color: '#4CAF50' }, span({ class: 'data' }, 'East')),
            Chart.Data({ value: 0.5, color: '#2196F3' }, span({ class: 'data' }, 'West')),
            Chart.Data({ value: 0.4, color: '#FF9800' }, span({ class: 'data' }, 'North'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Q2'),
            Chart.Data({ value: 0.5, color: '#4CAF50' }, span({ class: 'data' }, 'East')),
            Chart.Data({ value: 0.6, color: '#2196F3' }, span({ class: 'data' }, 'West')),
            Chart.Data({ value: 0.7, color: '#FF9800' }, span({ class: 'data' }, 'North'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Q3'),
            Chart.Data({ value: 0.7, color: '#4CAF50' }, span({ class: 'data' }, 'East')),
            Chart.Data({ value: 0.8, color: '#2196F3' }, span({ class: 'data' }, 'West')),
            Chart.Data({ value: 0.5, color: '#FF9800' }, span({ class: 'data' }, 'North'))
        )
    )
);

$('#example').content(chart);
await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart, span } = tags;

const quarters = [
    { label: 'Q1', values: [0.3, 0.5, 0.4] },
    { label: 'Q2', values: [0.5, 0.6, 0.7] },
    { label: 'Q3', values: [0.7, 0.8, 0.5] }
];
const regions = ['East', 'West', 'North'];
const colors = ['#4CAF50', '#2196F3', '#FF9800'];

const chart = {
    tag: Chart,
    attributes: { 
        type: 'bar', 
        multiple: true,
        labels: true, 
        primaryAxis: true,
        primaryAxis: true,
        style: 'width: 100%; max-width: 600px; margin: 0 auto;' 
    },
    children: [
        {
            tag: Chart.Body,
            children: quarters.map(q => ({
                tag: Chart.Row,
                children: [
                    { tag: Chart.Label, children: [q.label] },
                    ...q.values.map((value, i) => ({
                        tag: Chart.Data,
                        attributes: { value, color: colors[i] },
                        children: [{ tag: span, attributes: { class: 'data' }, children: [regions[i]] }]
                    }))
                ]
            }))
        }
    ]
};

$('#example').content(chart);
await import('/components/data-display/chart.js');
const { $ } = Lightview;

const chart = {
    Chart: {
        type: 'bar',
        multiple: true,
        labels: true,
        primaryAxis: true,
        primaryAxis: true,
        style: 'width: 100%; max-width: 600px; margin: 0 auto;',
        children: [
            {
                'Chart.Body': {
                    children: [
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Q1'] } },
                                    { 'Chart.Data': { value: 0.3, color: '#4CAF50', children: [{ span: { class: 'data', children: ['East'] } }] } },
                                    { 'Chart.Data': { value: 0.5, color: '#2196F3', children: [{ span: { class: 'data', children: ['West'] } }] } },
                                    { 'Chart.Data': { value: 0.4, color: '#FF9800', children: [{ span: { class: 'data', children: ['North'] } }] } }
                                ]
                            }
                        },
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Q2'] } },
                                    { 'Chart.Data': { value: 0.5, color: '#4CAF50', children: [{ span: { class: 'data', children: ['East'] } }] } },
                                    { 'Chart.Data': { value: 0.6, color: '#2196F3', children: [{ span: { class: 'data', children: ['West'] } }] } },
                                    { 'Chart.Data': { value: 0.7, color: '#FF9800', children: [{ span: { class: 'data', children: ['North'] } }] } }
                                ]
                            }
                        },
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Q3'] } },
                                    { 'Chart.Data': { value: 0.7, color: '#4CAF50', children: [{ span: { class: 'data', children: ['East'] } }] } },
                                    { 'Chart.Data': { value: 0.8, color: '#2196F3', children: [{ span: { class: 'data', children: ['West'] } }] } },
                                    { 'Chart.Data': { value: 0.5, color: '#FF9800', children: [{ span: { class: 'data', children: ['North'] } }] } }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
};

$('#example').content(chart);

Axes

Control axis visibility with primaryAxis and secondaryAxis. 

await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart, span } = tags;

const chart = Chart({ 
    type: 'bar', 
    labels: true, 
    primaryAxis: true,
    secondaryAxesCount: 4,
    style: 'width: 100%; max-width: 600px; margin: 0 auto;' 
},
    Chart.Body({},
        Chart.Row({}, Chart.Label({}, 'Jan'), Chart.Data({ value: 0.25 }, span({ class: 'data' }, '25%'))),
        Chart.Row({}, Chart.Label({}, 'Feb'), Chart.Data({ value: 0.5 }, span({ class: 'data' }, '50%'))),
        Chart.Row({}, Chart.Label({}, 'Mar'), Chart.Data({ value: 0.75 }, span({ class: 'data' }, '75%'))),
        Chart.Row({}, Chart.Label({}, 'Apr'), Chart.Data({ value: 1.0 }, span({ class: 'data' }, '100%')))
    )
);

$('#example').content(chart);
await import('/components/data-display/chart.js');
const { tags, $ } = Lightview;
const { Chart, span } = tags;

const months = [
    { label: 'Jan', value: 0.25, text: '25%' },
    { label: 'Feb', value: 0.5, text: '50%' },
    { label: 'Mar', value: 0.75, text: '75%' },
    { label: 'Apr', value: 1.0, text: '100%' }
];

const chart = {
    tag: Chart,
    attributes: { 
        type: 'bar', 
        labels: true, 
        primaryAxis: true,
        secondaryAxis: 'show-4-secondary-axes',
        style: 'width: 100%; max-width: 600px; 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: { 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: 'bar',
        labels: true,
        primaryAxis: true,
        secondaryAxis: 'show-4-secondary-axes',
        style: 'width: 100%; max-width: 600px; margin: 0 auto;',
        children: [
            {
                'Chart.Body': {
                    children: [
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Jan'] } }, { 'Chart.Data': { value: 0.25, children: [{ span: { class: 'data', children: ['25%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Feb'] } }, { 'Chart.Data': { value: 0.5, children: [{ span: { class: 'data', children: ['50%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Mar'] } }, { 'Chart.Data': { value: 0.75, children: [{ span: { class: 'data', children: ['75%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Apr'] } }, { 'Chart.Data': { value: 1.0, children: [{ span: { class: 'data', children: ['100%'] } }] } }] } }
                    ]
                }
            }
        ]
    }
};

$('#example').content(chart);