Modifying Legend Style
Introduction
This article will show how to modify the style of the legend in you widget.
Steps
- Open you widget in Edit mode.
- From the Options Menu
choose "Edit Script" to open the script editor.
- Copy and paste the following code into the script editor.
widget.on('processresult', function(se, ev){
/************* Configure here *********/
var color = "#00ff00";
var fontWeight = "bold";
var fontSize = "24px";
/************************************/
var legend = ev.result.legend;
legend.itemStyle.color = color;
legend.itemStyle.fontWeight = fontWeight;
legend.itemStyle.fontSize = fontSize;
}) - Modify the color, fontWeight and fontSize values to meet your style requirements, or comment out unneeded lines.
- Refresh the page and click "Apply".
The example code above will change the legend style from the default style
to this style:
-
Is it possible to modify the legend symbol? I inspected the result object and didn't see any attributes for the symbol. I have a graph with both columns and lines and I want to pair the lines and columns by color and so want the legend to show lines rather than squares for the symbol for the line series to make it easy to distinguish at first glance.
-
Hi Arno,
You need to convert it into a dashboard script that adds that handler to all the relevant widgets in the dashboard.
I hope to find some time today/tomorrow to write you a quick snippet to try out.
Cheers,
Ravid
-
Hi Arno,
It should be something like this, I haven't tested it out though
(I couldn't resist and also upgraded the code a bit)
The code as it is now will run on all widgets. You should add you own logic to identify the widgets that you'd like it to be applied on.
If this is something that you plan to be for several widgets, then I would suggest wrapping it a custom plugin which shouldn't take more then about an hour to do.
Ping me (ravid@paldi.solutions) if you need further assistance and we could take it offline so we won't spam this thread.
Cheers (:
Ravid
Code Screenshot
Code to Copy-Paste.
[code]
prism.on("dashboardloaded", function(dashboard, ev) {
/************* Configure here *********/
const legendModifier_color = "#00ff00";
const legendModifier_fontWeight = "bold";
const legendModifier_fontSize = "24px";
/************************************/
const currentWidgets = prism.activeDashboard.widgets.toArray();
currentWidgets.forEach( (widget) => {
// console.log("got widget: " + widget.oid);
// replace the "true" below with your own login on which widget should get this modification
if(true){
widget.on('buildquery', (w, query) => {
// console.log("buildquery" + w.oid);
let legend = ev.result.legend;
legend.itemStyle.color = legendModifier_color;
legend.itemStyle.fontWeight = legendModifier_fontWeight;
legend.itemStyle.fontSize = legendModifier_fontSize;
});
}
});
});[code]
Please sign in to leave a comment.
Comments
6 comments