CODEWITHSUNDEEP
amcharts
Nupur
Nupur

Reputation: 163

How to add custom export icon of amCharts

I want to use different export icon in amCharts for downloading the charts. As per the documentation I added icon field and mentioned path of image file.

But still it is getting rendered the default one.

How can I change the export icon?

Upvotes: 0

Views: 2259

Answers (1)

martynasma
martynasma

Reputation: 8595

The appearance of export icon is set in export.css bundled with the Export plugin.

If you want to change the icon, you will either need to modify the export.css file, or create a new one, or add an override in your own CSS.

The lines responsible for the icon are these:

.amcharts-export-menu .export-main > a, .amcharts-export-menu .export-drawing > a, .amcharts-export-menu .export-delayed-capturing > a {
    display: block;
    overflow: hidden;
    text-indent: -13333337px;
    width: 36px;
    height: 36px;
    padding: 0;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2211px%22%20height%3D%2214px%22%3E%3Cpath%20d%3D%22M3%2C0%20L8%2C0%20L8%2C5%20L11%2C5%20L5.5%2C10%20L0%2C5%20L3%2C5%20L03%2C0%22%20fill%3D%22%23888%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2212%22%20fill%3D%22%23888%22%20width%3D%2211%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E');
    background-color: #fff;
    background-position: center;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5);
    box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.5);
    border-radius: 18px;
    margin: 8px 8px 0 10px;
}

.amcharts-export-menu .export-main:hover > a {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2211px%22%20height%3D%2214px%22%3E%3Cpath%20d%3D%22M3%2C0%20L8%2C0%20L8%2C5%20L11%2C5%20L5.5%2C10%20L0%2C5%20L3%2C5%20L03%2C0%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2212%22%20fill%3D%22%23fff%22%20width%3D%2211%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E');
}

You can change the background-image part to either point to static image, or a data-url of another image.

When overriding, you don't need to specify all of the above settings, just the background-image part:

.amcharts-export-menu .export-main > a {
    background-image: url(myIcon.png)!important;
}

.amcharts-export-menu .export-main:hover > a {
    background-image: url(myIconHover.png)!important;
}

Upvotes: 1

Related Questions