I have a chart with time series and zoom. It will be better if the subtitle ("Click and drag in the plot area to zoom in") which is certainly very usefull in order to understand how to zoom don't appears when the chart is exported to pdf or image.
So I wonder if there is a way to hide it.
Here is a example on how to do what you are asking. The part does the subtitle manipulation is:
exporting: {
buttons: {
exportButton: {
menuItems: null,
onclick: function() {
chart.exportChart(null, {subtitle: {text:''}});
}
},
printButton: {
onclick: function() {
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: 'Click and drag in the plot area to zoom in' });
}
}
}
},
EDIT:
Sedondary option
You could remove the Highcharts generated print and export buttons. Then create your own print and export buttons along with a drop down for selecting the export type. Then if the export button is clicked, check the type and export as the type and without the sub title. Here is an example. Here is the code that handles the export and print button clicks:
$('#buttonExport').click(function() {
var e = document.getElementById("ExportOption");
var ExportAs = e.options[e.selectedIndex].value;
if(ExportAs == 'PNG')
{
chart.exportChart({type: 'image/png', filename: 'my-png'}, {subtitle: {text:''}});
}
if(ExportAs == 'JPEG')
{
chart.exportChart({type: 'image/jpeg', filename: 'my-jpg'}, {subtitle: {text:''}});
}
if(ExportAs == 'PDF')
{
chart.exportChart({type: 'application/pdf', filename: 'my-pdf'}, {subtitle: {text:''}});
}
if(ExportAs == 'SVG')
{
chart.exportChart({type: 'image/svg+xml', filename: 'my-svg'}, {subtitle: {text:''}});
}
});
$('#buttonPrint').click(function() {
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: 'Click and drag in the plot area to zoom in' });
});
I did another example keeping the subtitle if anyone have translations on their pages and want to print the chart. Just simply add a variable on the #Linger answer:
var subtitle = this.options.subtitle.text;
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: subtitle });
Example code here:
http://jsfiddle.net/pb6tbx7u/
Related
I'm trying to add 2 custom buttons in Angular Highcharts Line chart in the exporting property
exporting: {
enabled: true,
buttons: {
customButton: {
text: 'Custom Button',
click: () => {
alert('You pressed the button!');
},
},
anotherButton: {
text: 'Another Button',
click: () => {
alert('You pressed another button!');
},
},
},
}
But these 2 buttons not displaying. What could be the missing logic here?
Stackblitz
Hi think the below snippet will help you:
chart: {
type: "line",
renderTo: "chart",
events: {
render(events) {
let chart = this;
if (chart.customButton) {
chart.customButton.destroy();
}
chart.customButton = chart.renderer
.button("custom button", 100, 40, () => {
console.log("clicked.....");
chart.exportChart({
type: "application/pdf",
filename: "line-chart"
});
})
.add();
}
}
}
Here on click the button, you can implement the export. The example here exports PDF.
Demo:
https://stackblitz.com/edit/highcharts-angular-functionality?file=src%2Fapp%2Fstackoverflow%2Fhigh-chart-question%2Fhigh-chart-question.component.ts
https://highcharts-angular-functionality.stackblitz.io/exportcolor
Hope this helps.
The exporting.buttons is an option to edit the buttons in the exporting menu only: https://api.highcharts.com/highcharts/exporting.buttons
To render the custom buttons use the SVGRenderer feature: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
You can add those buttons in the render callback - calls after initial load and after each redraw: https://api.highcharts.com/highcharts/chart.events.render
I have an example in highchart which I add function so that the title will be put extra in case the chart is printed:
events: {
beforePrint: function() {
this.setTitle({
text: 'print title'
})
},
afterPrint: function() {
this.setTitle({
text: null
})
}
}
and for downloading:
exporting: {
chartOptions: {
title: {
text: 'download title'
}
}
}
My jsFiddle code: http://jsfiddle.net/2mvuLLs9/30/
The case when downloading it seems that the title is put correclty at the top but for the case printing, the title is put inside of the graph, I want to put the title also on top like in the case of downloading
How can I advoid this problem ?
I want to change the direction of my tab's tooltip.
I want to make it align to the top.
My code is like this :
var toolTip = 'test';
var panelExpertCharts = Ext.create('ContainerListChartExpert', {
chartList: chartList,
layout: standardLayout,
idIndicator: idIndicator,
idOrganisation: organisationObj.id,
title: chartList[0].titleExpert,
closable: true,
tabConfig: {
tooltip: toolTip
}
});
Thanks for reply.
Hamza.
Hi you can change a tooltip alignment in the following way
listeners: {
render: function(c) {
new Ext.ToolTip({
target: 'trackCallout',
anchor: 'right',
html: 'Test Tooltip'
});
}
}
You can check a very good example here from sencha .
I have an highchart and I create an export generated picture with the export function.
How can I make is so that the legend of the hidden series are not shown at all (I donøt want them greyed out) in the export?
I've tried this but it hides only the text, the symbol is still there.
exporting: { //the export button
type: 'image/jpeg',
chartOptions: {
legend: {
enabled: true,
itemHiddenStyle: {
display: 'none',
}
}
}
},...
I have also seen this answer: Filtering legend of a Highcharts by only visible series
but I need it done ONLY in export. That will remove it from the screen too.
In your case you will have empty item, better is using load event and destroy series which are not visible.
exporting: { //the export button
type: 'image/jpeg',
chartOptions: {
chart: {
events: {
load: function () {
var chart = this;
$.each(chart.series,function(i,serie) {
if(!serie.visible) {
serie.update({
showInLegend:false
});
}
});
}
}
}
}
},
See the example: http://jsfiddle.net/DMJf5/3/
I want to code CKEditor plugin. I have added button on panel and when I press it dialog is shown. In this dialog I can set text and after OK pressed this text inserted to the editor.
But I want add functionality. When I select text in editor and press this button I want see selected text in that dialog field. And after editing and press Ok selected text must be replaced with new one.
Thanks!
This is not 100% working, the first part is working, the final replacement isn't..
CKEDITOR.plugins.add( 'example',
{
init: function( editor )
{
editor.addCommand( 'exampleDialog', new CKEDITOR.dialogCommand( 'exampleDialog' ) );
editor.ui.addButton( 'example',
{
label: 'Insert a Link',
command: 'exampleDialog'//,
//icon: this.path + 'images/icon.png'
} );
CKEDITOR.dialog.add( 'exampleDialog', function( editor )
{
return {
title : 'example Properties',
minWidth : 400,
minHeight : 200,
contents :
[
{
id : 'general',
label : 'Settings',
elements :
[
{
type : 'text',
id : 'mystring',
label : 'text',
commit : function( data )
{
data.text = this.getValue();
}
}
]
}
],
onShow : function() {
//this._ranges = editor.getSelection().getRanges()
var mySelection = editor.getSelection().getSelectedText();
this.setValueOf("general","mystring",mySelection);
},
onOk : function()
{
var data = {};
this.commitContent( data );
var txt = data.text;
editor.insertText(txt); //this is not correct, since selection is being cleared...
}
};
});
}
});
My solution was to simply set it inide the onShow function:
onShow: function () {
this.setValueOf('my-tab-id', 'my-element-id', editor.getSelection().getSelectedText());
// ...
},
Full code skeleton:
(function () {
CKEDITOR.dialog.add('mySelectorDialog', function (editor) {
return {
contents: [
{
id: 'my-tab-id',
label: 'My Tab Label',
elements: [
{
id: 'my-element-id',
type: 'text',
label: 'My Element Label'
}
// ...
]
}
],
onShow: function () {
this.setValueOf('my-tab-id', 'my-element-id', editor.getSelection().getSelectedText());
// ...
},
onOk: function () {
// ...
}
// ...
};
});
})();