I’m trying to render a echart heatmap that has no background color within the grid/chart frame. I’ve tried every property possible and set it to false or transparent but no luck.

Here’s what it looks like now and i want all the gray/alernating grid lines and shading gone.

function App() { return ( <EChart backgroundColor={'transparent'} // Remove background color tooltip={{ //position: 'top' show: false }} style={{ height: '600px', width: '40%' }} grid={{ show: false, background: 'transparent' //height: '50%', //top: '10%' }} xAxis={{ type: 'category', data: days, splitArea: { show: true } }} yAxis={{ type: 'category', data: hours, splitArea: { show: true } }} visualMap={{ min: 0, max: 10, calculable: true, orient: 'horizontal', left: 'center', bottom: '0%', textStyle: { color: 'white' }, inRange: { color: ['#f6ffed', '#b7eb8f','#73d13d','#389e0d','#135200'] // Custom color palette try https://ant.design/docs/spec/colors#programmatic-usage } }} textStyle={{ color: 'white' }} series={[ { name: 'Tweets By Day By Hour', type: 'heatmap', data: data, shading: false, itemStyle: { color: 'transparent' // Make background bars transparent }, label: { show: true, color: 'black' }, emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'transparent', color: 'transparent' } } } ]} /> ) }

a empty chart with no background color or shading