Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

apexcharts - How to remove the horizontal lines of chart & its axis lines in angular?

Following is an angular app with graphs made of apex charts

https://codesandbox.io/s/apx-column-distributed-d3ns7?from-embed

How can I remove the horizontal lines of that chart & its axis lines (so that this looks much cleaner)

    this.chartOptions = {
      series: [
        {
          name: "distibuted",
          data: [21, 22,]
        }
      ],
      chart: {
        height: 350,
        type: "bar",
        events: {
          click: function(chart, w, e) {
            // console.log(chart, w, e)
          }
        }
      },
      colors: [
        "#008FFB",
        "#00E396",
      ],
      plotOptions: {
        bar: {
          columnWidth: "45%",
          distributed: true
        }
      },
      dataLabels: {
        enabled: false
      },
      legend: {
        show: false
      },
      xaxis: {
        categories: [
          ["John", "Doe"],
          ["Joe", "Smith"],
        ],
        labels: {
          style: {
            colors: [
              "#008FFB",
              "#00E396",
            ],
            fontSize: "12px"
          }
        }
      }
    };

& also how can I format the tooltip colors ?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

By now you can use this option

chartOptions: {
    chart: {
      id: "basic-bar",
    },
    grid: {
      show: true,      // you can either change hear to disable all grids
      xaxis: {
        lines: {
          show: true  //or just here to disable only x axis grids
         }
       },  
      yaxis: {
        lines: { 
          show: true  //or just here to disable only y axis
         }
       },   
    },
  }

for more details you can use this reference


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...