CODEWITHSUNDEEP
chartslinechartecharts
Alireza Parvizimosaed
Alireza Parvizimosaed

Reputation: 423

How to remove grid from line chart of Echart library

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: enter image description here

I appreciate it if you help me.

Upvotes: 14

Views: 15496

Answers (3)

Manuel Alejandro Serrano Mendo
Manuel Alejandro Serrano Mendo

Reputation: 21

use splitLine property in yAxis or xAxis in options object

yAxis: {        
        splitLine: {
            show: false
        }
    },

Upvotes: 2

RiTeSh
RiTeSh

Reputation: 521

xAxis: {
    axisLine: {
        show: false, // Hide full Line
    },
    xisTick: {
        show: false, // Hide Ticks,
    },
}

Full result

enter image description here

Upvotes: 2

Andreas Engedal
Andreas Engedal

Reputation: 801

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

Upvotes: 32

Related Questions