Chart Pie

Pie charts display data as slices of a circular pie, ideal for showing proportions and percentages that add up to 100%.

Basic Usage

To create a pie chart, use type: 'pie' and specify start and end for each segment. 

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

const chart = Chart({ 
    type: 'pie',
    style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;' 
},
    Chart.Body({},
        Chart.Row({},
            Chart.Data({ start: 0.0, end: 0.5, color: '#4CAF50' }) // 50%
        ),
        Chart.Row({},
            Chart.Data({ start: 0.5, end: 0.8, color: '#2196F3' }) // 30%
        ),
        Chart.Row({},
            Chart.Data({ start: 0.8, end: 1.0, color: '#FF9800' }) // 20%
        )
    )
);

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

const segments = [
    { start: 0.0, end: 0.5, color: '#4CAF50' },
    { start: 0.5, end: 0.8, color: '#2196F3' },
    { start: 0.8, end: 1.0, color: '#FF9800' }
];

const chart = {
    tag: Chart,
    attributes: { 
        type: 'pie',
        style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;' 
    },
    children: [
        {
            tag: Chart.Body,
            children: segments.map(seg => ({
                tag: Chart.Row,
                children: [
                    { tag: Chart.Data, attributes: seg }
                ]
            }))
        }
    ]
};

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

const chart = {
    Chart: {
        type: 'pie',
        style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;',
        children: [
            {
                'Chart.Body': {
                    children: [
                        { 'Chart.Row': { children: [{ 'Chart.Data': { start: 0.0, end: 0.5, color: '#4CAF50' } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Data': { start: 0.5, end: 0.8, color: '#2196F3' } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Data': { start: 0.8, end: 1.0, color: '#FF9800' } }] } }
                    ]
                }
            }
        ]
    }
};

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

With Labels

Add data labels with labels: true and include a <span class="data">. 

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

const chart = Chart({ 
    type: 'pie', 
    labels: true,
    style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;' 
},
    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%'))
        )
    )
);

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

const browsers = [
    { name: 'Chrome', start: 0.0, end: 0.6, color: '#4CAF50', text: '60%' },
    { name: 'Firefox', start: 0.6, end: 0.85, color: '#F44336', text: '25%' },
    { name: 'Safari', start: 0.85, end: 1.0, color: '#2196F3', text: '15%' }
];

const chart = {
    tag: Chart,
    attributes: { 
        type: 'pie', 
        labels: true,
        style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;' 
    },
    children: [
        {
            tag: Chart.Body,
            children: browsers.map(b => ({
                tag: Chart.Row,
                children: [
                    { tag: Chart.Label, children: [b.name] },
                    { 
                        tag: Chart.Data, 
                        attributes: { start: b.start, end: b.end, color: b.color },
                        children: [{ tag: span, attributes: { class: 'data' }, children: [b.text] }]
                    }
                ]
            }))
        }
    ]
};

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

const chart = {
    Chart: {
        type: 'pie',
        labels: true,
        style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;',
        children: [
            {
                'Chart.Body': {
                    children: [
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Chrome'] } },
                                    { 'Chart.Data': { start: 0.0, end: 0.6, color: '#4CAF50', children: [{ span: { class: 'data', children: ['60%'] } }] } }
                                ]
                            }
                        },
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Firefox'] } },
                                    { 'Chart.Data': { start: 0.6, end: 0.85, color: '#F44336', children: [{ span: { class: 'data', children: ['25%'] } }] } }
                                ]
                            }
                        },
                        {
                            'Chart.Row': {
                                children: [
                                    { 'Chart.Label': { children: ['Safari'] } },
                                    { 'Chart.Data': { start: 0.85, end: 1.0, color: '#2196F3', children: [{ span: { class: 'data', children: ['15%'] } }] } }
                                ]
                            }
                        }
                    ]
                }
            }
        ]
    }
};

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

Color Schemes

Use custom colors for each slice via the color prop. 

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

const chart = Chart({ 
    type: 'pie', 
    labels: true, 
    style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;' 
},
    Chart.Body({},
        Chart.Row({},
            Chart.Label({}, 'Desktop'),
            Chart.Data({ start: 0.0, end: 0.45, color: '#00BCD4' }, 
                span({ class: 'data' }, '45%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Mobile'),
            Chart.Data({ start: 0.45, end: 0.80, color: '#8BC34A' }, 
                span({ class: 'data' }, '35%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Tablet'),
            Chart.Data({ start: 0.80, end: 0.95, color: '#FFC107' }, 
                span({ class: 'data' }, '15%'))
        ),
        Chart.Row({},
            Chart.Label({}, 'Other'),
            Chart.Data({ start: 0.95, end: 1.0, color: '#607D8B' }, 
                span({ class: 'data' }, '5%'))
        )
    )
);

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

const devices = [
    { name: 'Desktop', start: 0.0, end: 0.45, color: '#00BCD4', text: '45%' },
    { name: 'Mobile', start: 0.45, end: 0.80, color: '#8BC34A', text: '35%' },
    { name: 'Tablet', start: 0.80, end: 0.95, color: '#FFC107', text: '15%' },
    { name: 'Other', start: 0.95, end: 1.0, color: '#607D8B', text: '5%' }
];

const chart = {
    tag: Chart,
    attributes: { 
        type: 'pie', 
        labels: true, 
        style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;' 
    },
    children: [
        {
            tag: Chart.Body,
            children: devices.map(d => ({
                tag: Chart.Row,
                children: [
                    { tag: Chart.Label, children: [d.name] },
                    { 
                        tag: Chart.Data, 
                        attributes: { start: d.start, end: d.end, color: d.color },
                        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: 'pie',
        labels: true,
        style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;',
        children: [
            {
                'Chart.Body': {
                    children: [
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Desktop'] } }, { 'Chart.Data': { start: 0.0, end: 0.45, color: '#00BCD4', children: [{ span: { class: 'data', children: ['45%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Mobile'] } }, { 'Chart.Data': { start: 0.45, end: 0.80, color: '#8BC34A', children: [{ span: { class: 'data', children: ['35%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Tablet'] } }, { 'Chart.Data': { start: 0.80, end: 0.95, color: '#FFC107', children: [{ span: { class: 'data', children: ['15%'] } }] } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Label': { children: ['Other'] } }, { 'Chart.Data': { start: 0.95, end: 1.0, color: '#607D8B', children: [{ span: { class: 'data', children: ['5%'] } }] } }] } }
                    ]
                }
            }
        ]
    }
};

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

Axes

Add background lines to the pie chart with the secondaryAxesCount prop. 

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

const chart = Chart({ 
    type: 'pie', 
    secondaryAxesCount: 4,
    style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;' 
},
    Chart.Body({},
        Chart.Row({}, Chart.Data({ start: 0.0, end: 0.45, color: '#00BCD4' })),
        Chart.Row({}, Chart.Data({ start: 0.45, end: 0.8, color: '#8BC34A' })),
        Chart.Row({}, Chart.Data({ start: 0.8, end: 1.0, color: '#FFC107' }))
    )
);

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

const chart = {
    tag: Chart,
    attributes: { 
        type: 'pie', 
        secondaryAxesCount: 4,
        style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;' 
    },
    children: [
        {
            tag: Chart.Body,
            children: [
                { tag: Chart.Row, children: [{ tag: Chart.Data, attributes: { start: 0.0, end: 0.45, color: '#00BCD4' } }] },
                { tag: Chart.Row, children: [{ tag: Chart.Data, attributes: { start: 0.45, end: 0.8, color: '#8BC34A' } }] },
                { tag: Chart.Row, children: [{ tag: Chart.Data, attributes: { start: 0.8, end: 1.0, color: '#FFC107' } }] }
            ]
        }
    ]
};

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

const chart = {
    Chart: {
        type: 'pie',
        secondaryAxesCount: 4,
        style: 'width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 1;',
        children: [
            {
                'Chart.Body': {
                    children: [
                        { 'Chart.Row': { children: [{ 'Chart.Data': { start: 0.0, end: 0.45, color: '#00BCD4' } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Data': { start: 0.45, end: 0.8, color: '#8BC34A' } }] } },
                        { 'Chart.Row': { children: [{ 'Chart.Data': { start: 0.8, end: 1.0, color: '#FFC107' } }] } }
                    ]
                }
            }
        ]
    }
};

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

Calculating Values

Here's how to calculate --start and --end from percentages:

Segment Percentage --start --end
First 50% 0.0 0.5 (0 + 0.5)
Second 30% 0.5 (prev end) 0.8 (0.5 + 0.3)
Third 20% 0.8 (prev end) 1.0 (0.8 + 0.2) 
// Helper function to convert percentages to pie chart values
function percentagesToPie(percentages) {
    let cumulative = 0;
    return percentages.map(pct => {
        const start = cumulative;
        cumulative += pct / 100;
        return { start, end: cumulative };
    });
}

// Example:
const slices = percentagesToPie([50, 30, 20]);
// Returns: [
//   { start: 0, end: 0.5 },
//   { start: 0.5, end: 0.8 },
//   { start: 0.8, end: 1.0 }
// ]