How to remove grid from line chart of Echart library

Question

I will draw a line chart by echart library. When I draw a chart, it shows grid too. I do not need grid, but I cannot remove it. I have checked out Echart options and I know that grid:{show=false} is an option of echart but it is not effective. My snippet code is below.

function lineGraph(xAxisLabels){    
var echartLine = echarts.init(document.getElementById('myElineChart')); 
  echartLine.setOption({
    grid: {show: false},
    xAxis: [{
      type: 'category',
      showGrid: false,
      data: xAxisLabels
    }],
    yAxis: [{
      type: 'value',    
    }],
    series: [{
      name: 'Actual',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }],
  });}

The result is below:

I appreciate it if you help me.

Answer 1

I'm late to the party, but answering this question if anyone in the future needs help.

It's a good guess to think that this is because of the grid attribute, but the grid is actually set to false by default. The lines are generated by an attribute on your X and Y axis, called splitLine, which makes it look like a grid. You can remove it by changing the attribute like shown below:

function lineGraph(xAxisLabels){    
var echartLine = echarts.init(document.getElementById('myElineChart')); 
  echartLine.setOption({
    grid: {show: false},
    xAxis: [{
      type: 'category',
      showGrid: false,
      data: xAxisLabels,
      splitLine: {
         show: false
      },
    }],
    yAxis: [{
      type: 'value',   
      splitLine: {
         show: false
      },
    }],
    series: [{
      name: 'Actual',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }],
  });}