Title to the graph when saved as image in Echarts - javascript

I want to give title to the graph image which we get when we save the graph as image in Echarts. Echarts does not have option for the same. So, is there any way that we can achieve our requirement.
Attaching a link for your reference from echarts. Which provide the option for saveAsImage
https://ecomfe.github.io/echarts-doc/public/en/option.html#toolbox.feature.saveAsImage
As attaching a link of echarts example which has save image icon on the right top corner
https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-rainfall
I also want to position the hover tooltip which we get on hover of the save image icon. they have some default options. But, I have to increase the space more.
I really thank the guys who can come up with the solution for the above requirement.

By default, the name of the image is the chart title.
You can set the title by using:
option: {
title: {
text: 'myTitle'
}
}
To provide a custom name, you can use the saveAsImage.name function:
option: {
toolbox: {
feature: {
saveAsImage: {
name: 'myImageName'
}
}
}
}
Bonus: To increase the space between the icons, you can set toolbox.itemGap, and maybe get the result you want:
option: {
toolbox: {
itemGap: 20,
bottom: 20,
...
}
}
Or customize the icons itself through toolbox.iconStyle. For example, by setting a transparent border:
option: {
toolbox: {
iconStyle: {
borderWidth: 10,
borderColor: rgba(0, 0, 0, 0),
...
}
}
}
Toolbox documentation

option: {
toolbox: {
feature: {
saveAsImage: {
title: 'Save',
}
}
}
}

Related

How to add font family to Chart.js V3.7.0

I tried both this:
plugin: {
label: {
font: {
family: "Lato"
}
}
}
and this:
myChart.defaults.global.defaultFontFamily = "Lato";
Pieces of code to add Lato font family to my chart, but both cases didn't work.
Any better suggestions? Note that the version I use is 3.7.0.
Thanks in advance!
For global use: Chart.defaults.font.family = "Lato".
Details here.
The correct way to specify would be like this (in options):
plugins: { // not plugin
legend: { // extra layer: legend
labels: { // with an "s"
font: {
family: "Lato" // right here
}
}
}
}

Keep emphasis on click with echarts graph

I have a graph chart made using echarts. When I hover on the edges, it displays some behavior set on the emphasis option. there is any way i can have this behavior happening when I click one of the edges ?
Emphasis code :
emphasis: {
lineStyle: {
width: 5,
color: "#555555"
}
}
myChart.on('click', (params) => {
if (params.dataType === 'edge') {
/* you can check params to look for what you want to pick */
myChart.dispatchAction({
/* HighLight type */
type: 'focusNodeAdjacency',
/* OffLight type if you need */
// type: 'unfocusNodeAdjacency',
/* Positioning the series with seriesId/seriesIndex/seriesName */
seriesIndex: 0,
/* Positioning the node with dataIndex */
dataIndex: params.dataIndex
});
}
})

Making custom chrome app top bar

I am making a chrome app and this is my background.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false
});
});
I want to know how to make it so when I run the app, the top bar where you can close the app is a different color. I also want to know how to show text on the top bar with a different color.
The top bar is part of the window's frame.
You can supply a FrameOptions object to create():
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 500,
'height': 500,
},
'resizable': false,
'frame': { /* ... */ }
});
});
You have 2 broad options:
You can keep the default system frame, and have (minimal) customization options: specifically, you can control the frame's color. See this sample.
'frame': { 'color': "#ff0000" }
Optionally, it can be different when active/inactive. See the documentation for appropriate format. You can't control the text color this way.
You can completely disable the OS-supplied frame, and build your own - but you'll need to provide your own controls (e.g. a close button) and draggable areas. See this sample.
'frame' : { 'type' : 'none' }
try this:
innerBounds: {
width: ,
height: ,
minWidth: ,
maxWidth: ,
minHeight: ,
maxHeight:
}

Highcharts pie chart list of selected section

I have enabled my pie chart to have multiple sections selected. (Not yet got it working as I want it though). Open SO questions here
But once I get this done, I would like to return the list of selected sections everytime a change in made in any selection.
Can someone please suggest. !!
My COde:
series: [{
name: 'Departments',
// allowPointSelect : true,
slicedOffset: 0,
states: {
select: {
color: 'red'
}
},
point: {
events: {
click: function(event){
//this.slice(null);
this.select(null, true);
filterCharts(cloneDonutData.Departments, dChart.series[0].name,this.name);
//console.log(this.series[0].chart.getSelectedPoints());
}
}
} ,
data: ....
]
USe: http://api.highcharts.com/highcharts#Chart.getSelectedPoints
getSelectedPoints () Since 1.2.0
Returns an array of all currently selected points in the chart. Points can be selected either programmatically by the point.select() method or by clicking.

Filtering legend of a Highcharts by only visible series only in Export

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/

Categories