Custom toolbar buttons or triggers

[AidanDaniel97]

I am looking to be able to add custom buttons to the toolbar such as custom filters etc via the vue component or the ability to trigger SVG download as I need this ability. I would much prefer it to all be in one place apposed to having a separate filter

[junedchhipa]

What options would you need for custom buttons?

I can think of

chart: {
  toolbar: {
    customIcons: [{
      html: '<i class="fa fa-angle-down"></i>',
      onClick: function(e, chartContext) { ... },
      appendTo: 'left' // left / top means the button will be appended to the left most or right most position
     }]
  }
}

If you have anything else in mind, please suggest

[AidanDaniel97]

Something along those lines would be great! Can't think of any other options that would be needed, at least not that I would need

[junedchhipa]

Ok, I will implement it in future release

[darkoromanov]

+1 for this request, that would be really useful and powerful!

[darkoromanov]

I did a pull request with this feature https://github.com/apexcharts/apexcharts.js/pull/329

The new option would be like:

                    icon: '<img src="/static/icons/chart-carpet.png" width="20">',
                    class: 'custom-icon',
                    click: function () {
                      console.log("ok")
                    }
                  }]

[junedchhipa]

Thanks @darkoromanov I modified the code to allow the index of those controls The custom toolbar options would be like this.

                  customIcons: [{
                    icon: '<img src="/static/icons/chart-carpet.png" width="20">',
                    index: 4,
                    title: 'tooltip of the icon',
                    class: 'custom-icon',
                    click: function () {
                      console.log("cliked")
                    }
                  }]

[darkoromanov]

Cool thanks!

[GonzalezAnguita]

Hi! Is there any reason for not supporting JSX-style objects as icons?

import { FiDownload } from 'react-icons/fi';
...
tools: {
        download: <FiDownload />,
        selection: true,
        zoom: true,
        zoomin: true,
        zoomout: true,
        pan: false,
        reset: '',
        customIcons: [],
}

Would be awesome to have support for React-Icons

[pamelasouza]

Obrigado @darkoromanov Modifiquei o código para permitir o índice desses controles As opções personalizadas da barra de ferramentas seriam assim.

                  customIcons: [ { 
                    icon : '<img src = "/ static / icons / chart-carpet.png" width = "20">' , 
                    índice : 4 , 
                    título : 'dica de ferramenta do ícone' , 
                    classe : 'custom-icon ' , 
                    clique em : function  ( )  { 
                      console . log ( "clicado" ) 
                    } 
                  } ]

Please, how do I replace the icon with another svg? Or another local PNG icon?

This did not work:

       zoom: `<img src={require('./icons-chart/teste.png')} width="20">`

       zoom: '<img src={require(`./icons-chart/teste.png`)} width="20">',

       zoom: '<img src="./icons-chart/teste.png" width="20">',

       zoom: '<img src="./icons-chart/teste.svg" width="20">',

       zoom: '<img src=`${varSVG}` width="20">',

I tried some other ways and none of them rendered.

To test, I added the two icons (svg and png) to a tag to make sure they are rendering outside the lib.

[KresimirJurkovic]

Thanks @darkoromanov I modified the code to allow the index of those controls The custom toolbar options would be like this.

                  customIcons: [{
                    icon: '<img src="/static/icons/chart-carpet.png" width="20">',
                    index: 4,
                    title: 'tooltip of the icon',
                    class: 'custom-icon',
                    click: function () {
                      console.log("cliked")
                    }
                  }]

Is it possible to get an event taget off from the custom icon?

[sskanishk]

Obrigado @darkoromanov Modifiquei o código para permitir o índice desses controles As opções personalizadas da barra de ferramentas seriam assim.

              customIcons: [ { 
                icon : '<img src = "/ static / icons / chart-carpet.png" width = "20">' , 
                índice : 4 , 
                título : 'dica de ferramenta do ícone' , 
                classe : 'custom-icon ' , 
                clique em : function  ( )  { 
                  console . log ( "clicado" ) 
                } 
              } ]

Please, how do I replace the icon with another svg? Or another local PNG icon?

This did not work:

   zoom: `<img src={require('./icons-chart/teste.png')} width="20">`
   zoom: '<img src={require(`./icons-chart/teste.png`)} width="20">',
   zoom: '<img src="./icons-chart/teste.png" width="20">',
   zoom: '<img src="./icons-chart/teste.svg" width="20">',
   zoom: '<img src=`${varSVG}` width="20">',

I tried some other ways and none of them rendered.

To test, I added the two icons (svg and png) to a tag to make sure they are rendering outside the lib.

Did you get the solution ?

[DevOpsCraftsman]

I’m experiencing the same problem… Nothing is rendered, even if you double check that the path to the static image is right.

[lhllyra]

Obrigado @darkoromanov Modifiquei o código para permitir o índice desses controles As opções personalizadas da barra de ferramentas seriam assim.

              customIcons: [ { 
                icon : '<img src = "/ static / icons / chart-carpet.png" width = "20">' , 
                índice : 4 , 
                título : 'dica de ferramenta do ícone' , 
                classe : 'custom-icon ' , 
                clique em : function  ( )  { 
                  console . log ( "clicado" ) 
                } 
              } ]

Please, how do I replace the icon with another svg? Or another local PNG icon? This did not work:

   zoom: `<img src={require('./icons-chart/teste.png')} width="20">`
   zoom: '<img src={require(`./icons-chart/teste.png`)} width="20">',
   zoom: '<img src="./icons-chart/teste.png" width="20">',
   zoom: '<img src="./icons-chart/teste.svg" width="20">',
   zoom: '<img src=`${varSVG}` width="20">',

I tried some other ways and none of them rendered. To test, I added the two icons (svg and png) to a tag to make sure they are rendering outside the lib.

Did you get the solution ?

Solved in #481 , instantiated my custom icon as an svg tag through an string literal constant and assigned it to the download icon. I imagine it should work for other toolbar buttons. Check my comment over there for more details and images of the solution.

Happy coding!