I am trying to solve an area chart development but I see the exact style as difficult to achieve.
I am using google charts to develop this but I am struggling with
- How to apply linear gradient in both data area which turns white towards 0 line.
- How to center my liner gradient spread to the peak data points (In below pic, its on June)
Attaching 2nd pic of my situation with google charts
My google chart code.
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'KWH', 'KWH'],
['JAN', -250, 800],
['APRIL', -240, 810],
['JUN', -250, 900],
['SEP', -240, 800],
['DEC', -200, 700]
]);
var options = {
title: '',
colors: ['#00B55F', '#FFC52D'],
chartArea: {
width: '88%', // Adjust width
height: '80%' // Adjust height
},
hAxis: { title: 'Month', titleTextStyle: { color: '#FFC52D0' }, backgroundColor: 'FFC52D0' },
vAxis: { minValue: -400, ticks: [-400, -200, 0, 200, 400, 600, 800, 1000] }
};
var chart = new google.visualization.AreaChart(document.getElementById('area_chart_div'));
chart.draw(data, options);
}