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 }, ], });
Leave a Comment