how to disable download option on apexcharts?

Question

I am use apexcharts vue bindings to plot a few bar charts.

As told by docs it should be possible to disable the toolbar by set show:false as seen there.

So i did it on my helper function:

// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
  toolbar: { show:false },// docs says it should do the trick
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  plotOptions: {
    bar: { distributed: true, horizontal: true }
  },
  tooltip: {
    theme: "dark"
  },
  xaxis: {
    categories: labels,
    color: "white",
    labels: {
      style: {
        colors: ["white"]
      }
    }
  },
  yaxis: {
    labels: {
      style: {
        color: "white"
      }
    }
  }
});

and i pass it to my vue component this way:

<template>
    <v-layout row justify-center wrap>
        <v-flex xs12>
            <apexchart type="bar" height="500" :options="chartOptions" :series="series"/>
        </v-flex>
    </v-layout>
</template>

<script>
const doOptions = require("./do-chart-options");
const labels = [
    "Javascript",
    "Java",
    "SQL",
    "HTML",
    "CSS",
    "C",
    "C++",
    "PHP",
    "Python",
    "GO",
    "Ruby"
];
module.exports = {
    name: "chart-languages",
    data: _ => ({
        series: [{ data: [160, 110, 90, 85, 80, 80, 60, 30, 15, 14, 9] }],
        chartOptions: doOptions(labels)
    })
};
</script>

However the menu is still there:

Any guidance is welcome.

score 58 · Accepted Answer · answered Jan 04 '19 at 02:12

toolbar should be under chart key

{
  chart: {
    toolbar: {
      show: false
    }
  },
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  plotOptions: {
    bar: {
      distributed: true,
      horizontal: true
    }
  },
  ...
}

You can check my demo here

score 7 · Answer 2 · answered Jul 05 '21 at 15:18

7

  chart: {
      toolbar: {
        show: true,
        tools:{
          download:false // <== line to add
        }
      }
    }

Can only disable download option , but toolbar exists

answered Jul 05 '21 at 15:18

Inshaf Ahmed

401
6
8

score 2 · Answer 3 · answered May 31 '22 at 22:29

2

Use CSS to hide the option(s) from the download section.

/* hide the Download CSV */

<style lang="scss" scoped>
  ::v-deep .apexcharts-menu-item.exportCSV {
    display: none;
  }
</style>

answered May 31 '22 at 22:29

vladimir

13,428
2
44
70

Awesome, this is exactly what I was wanting to do. In my vanilla CSS file, I just used this part and it worked for me: .apexcharts-menu-item.exportCSV { display: none; } – amota Jun 20 '22 at 04:21

score 1 · Answer 4 · answered Jul 05 '21 at 15:30

1

edit this line may help you

{chart: {toolbar: {show: false
}},
  colors: randomColor({
    luminosity: "light",
    hue: "blue",
    count: 30
  }),
  plotOptions: {
    bar: {
      distributed: true,
      horizontal: true
    }
  },
}

answered Jul 05 '21 at 15:30

Ahsan

11
1

2

Please add details so users(including OP) understand why this would work in place of existing code. – Tushar Shahi Jul 05 '21 at 18:11

how to disable download option on apexcharts?

4 Answers4