Chart Column

Column charts display data as vertical bars. The column height represents the data value.

Basic Usage

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

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

const chart = Chart({ 
    type: 'column', 
    labels: true,
    style: 'width: 100%; max-width: 600px; height: 250px; margin: 0 auto;' 
},
    Chart.Body({},
        Chart.Row({}, Chart.Label({}, 'Jan'), Chart.Data({ value: 0.4 }, span({ class: 'data' }, '40%'))),
        Chart.Row({}, Chart.Label({}, 'Feb'), Chart.Data({ value: 0.6 }, span({ class: 'data' }, '60%'))),
        Chart.Row({}, Chart.Label({}, 'Mar'), Chart.Data({ value: 0.8 }, span({ class: 'data' }, '80%'))),
        Chart.Row({}, Chart.Label({}, 'Apr'), Chart.Data({ value: 0.5 }, span({ class: 'data' }, '50%')))
    )
);

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

const months = [
    { label: 'Jan', value: 0.4, text: '40%' },
    { label: 'Feb', value: 0.6, text: '60%' },
    { label: 'Mar', value: 0.8, text: '80%' },
    { label: 'Apr', value: 0.5, text: '50%' }
];

const chart = {
    tag: Chart,
    attributes: { type: 'column', labels: 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: { 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: 'column',
        labels: 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': { value: 0.4, children: [{ span: { class: 'data', children: ['40%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Feb'] } }, { 'Chart.Data': { value: 0.6, children: [{ span: { class: 'data', children: ['60%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Mar'] } }, { 'Chart.Data': { value: 0.8, children: [{ span: { class: 'data', children: ['80%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Apr'] } }, { 'Chart.Data': { value: 0.5, children: [{ span: { class: 'data', children: ['50%'] } }] } }] } }
                    ]
                }
            }
        ]
    }
};

$('#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 } = tags;

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

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

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

const chart = {
    tag: Chart,
    attributes: { 
        type: 'column', 
        multiple: true,
        primaryAxis: true,
        style: 'width: 100%; max-width: 600px; height: 280px; 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] }
                    }))
                ]
            }))
        }
    ]
};

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

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

$('#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: 'column', 
    labels: true, 
    primaryAxis: true,
    secondaryAxesCount: 5,
    style: 'width: 100%; max-width: 600px; height: 280px; margin: 0 auto;' 
},
    Chart.Body({},
        Chart.Row({}, Chart.Label({}, 'A'), Chart.Data({ value: 0.2 }, span({ class: 'data' }, '20%'))),
        Chart.Row({}, Chart.Label({}, 'B'), Chart.Data({ value: 0.4 }, span({ class: 'data' }, '40%'))),
        Chart.Row({}, Chart.Label({}, 'C'), Chart.Data({ value: 0.6 }, span({ class: 'data' }, '60%'))),
        Chart.Row({}, Chart.Label({}, 'D'), Chart.Data({ value: 0.8 }, span({ class: 'data' }, '80%'))),
        Chart.Row({}, Chart.Label({}, 'E'), 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 data = [
    { label: 'A', value: 0.2, text: '20%' },
    { label: 'B', value: 0.4, text: '40%' },
    { label: 'C', value: 0.6, text: '60%' },
    { label: 'D', value: 0.8, text: '80%' },
    { label: 'E', value: 1.0, text: '100%' }
];

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

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

const chart = {
    Chart: {
        type: 'column',
        labels: true,
        primaryAxis: true,
        secondaryAxesCount: 5,
        style: 'width: 100%; max-width: 600px; height: 280px; margin: 0 auto;',
        children: [
            {
                'Chart.Body': {
                    children: [
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['A'] } }, { 'Chart.Data': { value: 0.2, children: [{ span: { class: 'data', children: ['20%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['B'] } }, { 'Chart.Data': { value: 0.4, children: [{ span: { class: 'data', children: ['40%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['C'] } }, { 'Chart.Data': { value: 0.6, children: [{ span: { class: 'data', children: ['60%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['D'] } }, { 'Chart.Data': { value: 0.8, children: [{ span: { class: 'data', children: ['80%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['E'] } }, { 'Chart.Data': { value: 1.0, children: [{ span: { class: 'data', children: ['100%'] } }] } }] } }
                    ]
                }
            }
        ]
    }
};

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