How to enable the "chart context menu" in nicegui highcharts to save image as png or jpg? #9
-
Questionaccording to the highcharts API, I add the above code in my highchart. It seems not to be working. It was expected that a burger button will show up on the upright corner, but nothing happened. Any idea to make the download function work? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Hi @xiaozhanzi, Do you have an example how to use these options in plain HTML? I tried it, but it doesn't seem to work either: <html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px"></div>
<script>
Highcharts.chart("container", {
xAxis: {
categories: ["A", "B"],
},
series: [
{ name: "Alpha", data: [0.1, 0.2] },
{ name: "Beta", data: [0.3, 0.4] },
],
navigation: {
buttonOptions: { enabled: true },
},
exporting: {
enabled: true,
buttons: { enabled: true },
},
});
</script>
</body>
</html>
|
Beta Was this translation helpful? Give feedback.
-
|
The exporting.js is needed: <html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px"></div>
<script>
Highcharts.chart("container", {
xAxis: {
categories: ["A", "B"],
},
series: [
{ name: "Alpha", data: [0.1, 0.2] },
{ name: "Beta", data: [0.3, 0.4] },
],
navigation: {
buttonOptions: { enabled: true },
},
exporting: {
enabled: true,
buttons: { enabled: true },
},
});
</script>
</body>
</html>
But don't know if this js has been included in nicegui. |
Beta Was this translation helpful? Give feedback.
-
|
Oh, I see! Then let's add the "exporting" extra: ui.highchart({
'xAxis': {'categories': ['A', 'B']},
'series': [
{'name': 'Alpha', 'data': [0.1, 0.2]},
{'name': 'Beta', 'data': [0.3, 0.4]},
],
'navigation': {
'buttonOptions': {'enabled': True},
},
'exporting': {
'enabled': True,
'buttons': {'enabled': True},
},
}, extras=['exporting']) |
Beta Was this translation helpful? Give feedback.
-
|
Nice! It works! Many thanks @falkoschindler for your help. |
Beta Was this translation helpful? Give feedback.
Oh, I see! Then let's add the "exporting" extra: