Is there a way to remove the download option from apexcharts?

I am currently using apexcharts vue bindings to create several bar charts.

According to the documentation, it should be possible to hide the toolbar by setting show:false as indicated here.

So I implemented it in my helper function:

// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
  toolbar: { show:false },// the documentation says this should work
  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 passed it to my Vue component like this:

<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 appearing:

https://i.sstatic.net/foL6H.jpg

Any advice or guidance on resolving this issue would be greatly appreciated.

Answer №1

chart should have a toolbar nested within it

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

To see my demonstration, click here

Answer №2

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

The option to disable downloads is available, while the toolbar remains visible.

Answer №3

Employ CSS to conceal the options within the download segment.

/* Conceal the Download CSV */

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

Answer №4

Revise this sentence for potential improvement

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to address the issue of images exceeding the height limit in my dynamic views?

Query: Why is the image height increasing significantly in this scenario? Despite implementing the solution provided in the aforementioned question, the issue has resurfaced. Do you believe the problem lies in the frontend or backend? I am considering cre ...

Best way to convert a list to JSON in Django?

When it comes to graphing data with Google Charts using Javascript, I encountered a challenge of passing an array of data values. The structure of the array is straightforward, typically resembling: [["Plankton", 725], ["MrKrabs", 681], ["Spongebob", 671 ...

Adjust the time increment dynamically within the dropdown menu

I have a challenge to make a dynamic dropdown field that adjusts based on the value of a previous input field. There is a dropdown for selecting length, with options like 30 min., 60 min., and 90 min.. Additionally, there are input fields for startTime and ...

ReactJS: Trouble encountered while parsing information from JSON data

Currently, I am facing an issue while trying to pass data from my JSON file to my ReactJS application. The error message that I am encountering is as follows: TypeError: Cannot read property 'mainPage' of undefined Upon console.logging siteDa ...

moment.js is unable to extract the time information from a timestamp

I'm having trouble converting a timestamp using moment.js from a json data set. When I try to use moment.format('MMMM Do YYYY, H:mm:ss'), the output is showing something like May 25th 2361, 0:00:00 for the timestamp 12351223423. This seems t ...

hyperlinked text that automatically updates with the current date (using metarefresh)

I want to insert a date variable into a URL based on the current date. Specifically, I am looking to create a link from SharePoint that directs a user to the relevant files in a shared drive. My initial idea is to use an HTML page with a meta refresh that ...

Step-by-step Guide on Utilizing Bootstrap Table

Currently, I am in the process of fetching data from an API and displaying it in a tabular format using JavaScript. While I have successfully retrieved the data, I'm facing an issue with applying Bootstrap styling to the table headers. async functi ...

Webpack encountering a error while running on IE11

I've been developing a VueJS application, but I'm encountering issues in IE11. When I try to load the application, I'm greeted with blank pages and an error message that says "Unable to get property 'call' of undefined or null refe ...

There seems to be an issue with the multiple file upload feature as no data is being transmitted to

I need to implement a multiple file upload feature on my website. On the client side, I currently have the following code: $(document).on( "click", ".save-button", function () { var data = new FormData(); data.append(&apos ...

Is it possible to rewrite this function recursively for a more polished outcome?

The function match assigns a true or false value to an attribute (collapsed) based on the value of a string: function match(children) { var data = $scope.treeData for (var i = 0; i < data.length; i++) { var s = data[i] for (var ...

What is the best way to create collapsible rows in AngularJS with ng-repeat?

In my current project, I am utilizing ng-repeat to display objects in rows. To achieve my desired functionality of only displaying elements present in the DOM, I decided to use a helpful plugin called angular-vs-repeat. However, I am facing an issue with u ...

How to store an imported JSON file in a variable using TypeScript

I am facing a challenge with a JSON file that stores crucial data in the following format { "login": { "email": "Email", "firstName": "First name", "lastName": "Last name", ...

What steps can I take to ensure that the information in my Cart remains consistent over time?

I recently built a NextJS application integrating the ShopifyBuy SDK. My implementation successfully fetches products from the store and displays them to users. Users can navigate to product pages and add items to their cart. However, I encountered an iss ...

Linking information within a three-dimensional mesh structure in the context of a city created through procedural generation

Currently, I am working on developing a procedurally generated city using three.js, focusing mainly on creating buildings. One of the crucial requirements for this project is that when a user clicks on a building with their mouse, detailed information abou ...

Navigate to the middle of a DIV container in Angular 7

Is there a way to programmatically scroll to the center of my element on both the Y and X axes when a specific function is executed? My HTML structure includes the following (I am aiming to scroll to the middle of #viewport): </div> <div # ...

Vue Router displays a blank page after being compiled

Seeking assistance here. I have built my application using vuejs and everything seems to be working fine. However, when I run npm run build, extract the dist folder, and open index.html, all I see is a blank page with no errors in the console. main.js impo ...

Transmitting JSON securely to a server using an HTML form webpage

Currently, I have an HTML page with a form that communicates with a server using JSON requests. The purpose is to load user's previous answers upon loading and save new answers when the submit button is pressed. Each user has a unique user_id attribut ...

Methods for removing a CSS element that specifically targets a table using JavaScript

I am facing an issue with my Drupal site where the CSS for a Google Org Chart is being overridden by some existing styles. Below is the code snippet in question. The CSS I need to eliminate: .MainBlock table td { border-right: 1px solid #045273; bo ...

Is there a way to retrieve the value of an HTML element (specifically an h1 tag) and send it to the server using Express to render it out?

Is there a way to extract the value of an h1 HTML tag and send it to the server using Express? I attempted to use body-parser, but it only works with input tags. Is there an alternative method to obtain the value within the h1 tag? ...

Creating unique CSS styles through randomly generated values for both the left and top positions each time the page is refreshed or loaded

I have multiple draggable frames within my HTML, each with unique "left" and "top" values in the CSS. I am looking to randomize these values every time the page is refreshed or loaded, with a range of 10 to 1000 pixels. Here is an example of the CSS for o ...