Untitled

Highcharts.chart('container', {
    chart: {
        type: 'area', // Set chart type
    },
    title: {
        text: 'Actual and Forecast Data',
    },
    xAxis: {
        type: 'datetime', // Enables proper time-based scaling
        labels: {
            format: '{value:%e %b}', // Adjust date format (e.g., "12 Jan")
            rotation: 0, // No rotation for better alignment
            align: 'center', // Centers labels under peaks
            y: 20, // Adjust vertical placement
        },
        tickInterval: 24 * 3600 * 1000, // One tick per day
    },
    yAxis: [
        {
            title: {
                text: 'Actual and Forecast (kWh)',
            },
        },
        {
            opposite: true, // Place deviation (%) axis on the right
            title: {
                text: 'Deviation (%)',
            },
        },
    ],
    tooltip: {
        shared: true, // Show all series info in a single tooltip
        xDateFormat: '%e %b %Y, %H:%M', // Format tooltip date
    },
    series: [
        {
            name: 'Forecast (kWh)',
            data: [
                [Date.UTC(2025, 0, 12), 3000],
                [Date.UTC(2025, 0, 13), 3200],
                [Date.UTC(2025, 0, 14), 2900],
                [Date.UTC(2025, 0, 15), 3100],
                [Date.UTC(2025, 0, 16), 3000],
            ],
            color: '#007bff',
        },
        {
            name: 'Actual (kWh)',
            data: [
                [Date.UTC(2025, 0, 12), 2800],
                [Date.UTC(2025, 0, 13), 3000],
                [Date.UTC(2025, 0, 14), 2700],
                [Date.UTC(2025, 0, 15), 2950],
                [Date.UTC(2025, 0, 16), 2900],
            ],
            color: '#28a745',
        },
        {
            name: 'Deviation (%)',
            data: [
                [Date.UTC(2025, 0, 12), 5],
                [Date.UTC(2025, 0, 13), 6],
                [Date.UTC(2025, 0, 14), 8],
                [Date.UTC(2025, 0, 15), 7],
                [Date.UTC(2025, 0, 16), 6],
            ],
            color: '#ff8c00',
            yAxis: 1, // Map this series to the secondary axis
        },
    ],
});