series: [
    {
        type: 'bar',
        xKey: 'month',
        yKey: 'sales',
        segmentation: {
            enabled: true,
            key: 'y', // Segment based on y-axis values
            segments: [
                {
                    start: 0,
                    stop: 50000,
                    // Theme automatically applies different colors
                    // Don't hardcode colors - let theme handle it
                },
                {
                    start: 50000,
                    stop: 100000,
                    // Another theme color for mid-range values
                },
                {
                    start: 100000,
                    // High values get distinct theme styling
                    // Extends to domain maximum
                },
            ],
        },
    },
];

series: [
    {
        type: 'line',
        xKey: 'date',
        yKey: 'value',
        segmentation: {
            enabled: true,
            key: 'x', // Segment based on x-axis (time)
            segments: [
                {
                    start: new Date('2024-01-01'),
                    stop: new Date('2024-06-30'),
                    strokeWidth: 2,
                    lineDash: [4, 2], // Historical data dashed
                },
                {
                    start: new Date('2024-07-01'),
                    stop: new Date('2024-12-31'),
                    strokeWidth: 3,
                    // Current period solid and bolder
                },
                {
                    start: new Date('2025-01-01'),
                    strokeWidth: 2,
                    lineDash: [2, 2], // Projected data dotted
                },
            ],
        },
    },
];

series: [
    {
        type: 'area',
        xKey: 'quarter',
        yKey: 'revenue',
        segmentation: {
            enabled: true,
            key: 'y',
            segments: [
                {
                    start: 0,
                    stop: 1000000,
                    // Below target - theme applies warning color
                    fillOpacity: 0.3,
                },
                {
                    start: 1000000,
                    stop: 2000000,
                    // On target - theme applies success color
                    fillOpacity: 0.5,
                },
                {
                    start: 2000000,
                    // Above target - theme applies accent color
                    fillOpacity: 0.7,
                },
            ],
        },
    },
];

// ❌ OLD WAY - Complex and repetitive
itemStyler: (params) => {
    const { datum, yValue } = params;
    if (yValue < 50000) {
        return { fill: '#ff6b6b' }; // Hardcoded color
    } else if (yValue < 100000) {
        return { fill: '#feca57' }; // Another hardcoded color
    }
    return { fill: '#48dbfb' }; // Yet another hardcoded color
};

// ✅ NEW WAY - Clean and theme-aware
segmentation: {
    enabled: true,
    key: 'y',
    segments: [
        { start: 0, stop: 50000 },
        { start: 50000, stop: 100000 },
        { start: 100000 }
    ]
}

segmentation: {
    enabled: true,
    key: 'y',
    segments: [
        {
            start: 0,
            stop: 50000,
            fill: {
                type: 'pattern',
                pattern: 'diagonal-lines',
                // Theme handles pattern colors
            }
        },
        {
            start: 50000,
            // Solid fill for normal range
        }
    ]
}