Modifying Legend Style

Follow

David Hogeg

January 21, 2016 19:52

Introduction

This article will show how to modify the style of the legend in you widget.

Steps

1.  Open you widget in Edit mode.
   
   
2. From the Options Menu    choose "Edit Script" to open the script editor.
   
   
   
   
3. 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;
   })

4. Modify the color, fontWeight and fontSize values to meet your style requirements, or comment out unneeded lines.
   
   
5. Refresh the page and click "Apply".
   
   The example code above will change the legend style from the default style
   
   
   
   to  this style:
   
   
   
   
   

1

• 

  Parry Memarzadeh February 15, 2018 20:32

  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.

  2

  Comment actions Permalink
• 

  Sisense Karhoo September 27, 2019 14:43

  Hi Parry,

  Did you manage to find a way to modify the size of the Legend coloured box (e.g. in your screenshot the cyan coloured box next to # of unique OrderID) to make it larger and consistent with the text size?

  Thanks

  David

  0

  Comment actions Permalink
• 

  Arno Witte October 16, 2019 10:23

  What do I do when I want to do this for my entire dashboard? I tried copying the given code in the dashboard scipt editor.

  0

  Comment actions Permalink
• 

  Ravid Paldi October 16, 2019 11:29

  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

  Paldi Solutions - Implementation Partner

  0

  Comment actions Permalink
• 

  Arno Witte October 16, 2019 11:47

  That would be great, thanks in advance!

  0

  Comment actions Permalink
• 

  Ravid Paldi October 16, 2019 15:05

  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]

   

  0

  Comment actions Permalink

Please sign in to leave a comment.