Customize export menu options

[[email protected]]

Hello!

Just curious if there was a way to customize what links appear in the export menu dropdown. I would love to be able to offer the social share links but not the "edit" link, for example?

Thanks!

Jen

[KacperMadej]

Yes, it is possible to customize context menu of exporting module - the export menu dropdown.
You could change context of the menu by changing menuItems.
API: http://api.highcharts.com/highcharts#ex ... .menuItems

Option path in context of Cloud options object will be: options.exporting.buttons.contextButton.menuItems.
In a chart that doesn't have exporting options you should be able to add e.g. code:

Code: Select all

options.exporting = {
  buttons: {
		contextButton: {
          menuItems: [{
				textKey: 'printChart',
				onclick: function () {
					this.print();
				}
			}, {
				separator: true
			}, {
				textKey: 'downloadPNG',
				onclick: function () {
					this.exportChart();
				}
			}, {
				textKey: 'downloadJPEG',
				onclick: function () {
					this.exportChart({
						type: 'image/jpeg'
					});
				}
			}, {
				separator: true
			},{
				textKey: 'downloadPDF',
				onclick: function () {
					this.exportChart({
						type: 'application/pdf'
					});
				}
			}, {
				textKey: 'downloadSVG',
				onclick: function () {
					this.exportChart({
						type: 'image/svg+xml'
					});
				}
			}]
		}
	}
};

In "Customize" step, in "Code" tab, in "Custom code" input field.

[[email protected]]

Thanks so much, that's super helpful.

Could you possibly supply the code to enable the social media links as well (Facebook, Twitter, LinkedIn, etc.)?

Thank you!!

[KacperMadej]

Links are based on Highcharts Cloud generated URL, but you should set those links before the chart is saved and URL is generated. In that case it is possible to set URL after first save to same URL, but with '/1' at the end of the URL, because after saving it should change like that (or it is already save multiple times and has a number at the end - increase it to get next URL, after future save).

While viewing a saved chart on "Shared" step social media links are available through icons.

[Jeffrey Phillips]

I’m sorry to be so dense, but can someone list step-by-step on how to remove the “Edit Chart” and “Create Chart” links from the dropdown using Highcharts Cloud?

[KacperMadej]

Hi,

Custom code is at Customize > Code > Custom code (before you will open it it will be at the bottom):



Code for export only options (print and download in PNG, JPEG, SVG, PDF):

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
  exporting:{ 
    buttons: {
		contextButton: {
			menuItems: [{
				textKey: 'printChart',
				onclick: function () {
					this.print();
				}
			}, {
				separator: true
			}, {
				textKey: 'downloadPNG',
				onclick: function () {
					this.exportChart();
				}
			}, {
				textKey: 'downloadJPEG',
				onclick: function () {
					this.exportChart({
						type: 'image/jpeg'
					});
				}
			}, {
				textKey: 'downloadPDF',
				onclick: function () {
					this.exportChart({
						type: 'application/pdf'
					});
				}
			}, {
				textKey: 'downloadSVG',
				onclick: function () {
					this.exportChart({
						type: 'image/svg+xml'
					});
				}
			}]
		}
    }}
}));

Code for export as above and social media sharing:

Code: Select all

Highcharts.extend(options, Highcharts.merge(options, {
  exporting: {
    buttons: {
      contextButton: {
        menuItems: [{
          "text": "<a href=\"https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fcloud.highcharts.com%2Fshow%2FCHART_ID\" target=\"_blank\">Share on Facebook</a>"
        }, {
          "text": "<a href=\"https://plus.google.com/share?url=http%3A%2F%2Fcloud.highcharts.com%2Fshow%2FCHART_ID\" target=\"_blank\">Share on Google+</a>"
        }, {
          "text": "<a href=\"https://twitter.com/share?url=http%3A%2F%2Fcloud.highcharts.com%2Fshow%2FCHART_ID&text=Your chart\" target=\"_blank\">Share on Twitter</a>"
        }, {
          "text": "<a href=\"http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fcloud.highcharts.com%2Fshow%2FCHART_ID\" target=\"_blank\">Share on LinkedIn</a>"
        }, {
          "separator": true
        }, {
          "textKey": "printChart"
        }, {
          "separator": true
        }, {
          "textKey": "downloadPNG"
        }, {
          "textKey": "downloadJPEG"
        }, {
          "textKey": "downloadPDF"
        }, {
          "textKey": "downloadSVG"
        }]
      }
    }
  }
}));

The code above has hard-coded links to a chart, so what you should do is save your chart. Check what link does it have and change it in the code - swap it with CHART_ID in the above code. Next save you chart and you should be good to go. You could test your chart using URL like:
https://cloud.highcharts.com/embed/CHART_ID/

If anything is unclear please ask.

Let us know if have any further questions.

Kind Regards.