Is it possible to hide the legend on a pie chart? I see posts from years ago but nothing recent.

  • 0
  • 1
  • Question
  • Updated 3 years ago
  • Answered
Photo of Yaniv

Yaniv

  • 0 Points

Posted 3 years ago

  • 0
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
Using script you can modify the <sgv> chart markup directly to hide the legend:

$("g.highcharts-legend").hide();

or you can invoke the HighCharts API to hide the legend:

var chart = Highcharts.charts[0];
chart.legend.group.hide();

You can test either of these scripts by pasting them into the JavaScript console when a chart is displayed.

To get these scripts to run you cannot use the Image Onload Technique because you can't place the raw IOL field [-] directly on the chart page. Instead you have to use a new and more powerful technique called Service Workers.
Service Workers is god mode for QuickBase as it can do anything you can dream up. Also, to gain access to a QuickBase rendered HighChart you use this code:
var chart = Highcharts.charts[0];
Using the chart handle as defined above you canmodify any aspect of a QuickBase rendered Chart using the HighChart API.
Photo of Yaniv

Yaniv

  • 0 Points
Thank you for that information. I am very new to QB and have no idea how to create a script. That might be little beyond the scope of this forum so much of your answer is way over my head. I take it there is no option natively in QB to disable the legend?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,264 Points 20k badge 2x thumb
To convince yourself the script works follow this procedure:

(1) display a chart with a legend
(2) press F12 to display the JavaScript Console
(3) paste either fragment of code into the JavaScript Console and observe the legend disappear
Photo of Yaniv

Yaniv

  • 0 Points
I tried to follow your instructions but got the following errors in the Console: VM855:1 Uncaught TypeError: Cannot read property 'hide' of null
    at <anonymous>:1:25


and

VM936:1 Uncaught ReferenceError: Highcharts is not defined(...)(anonymous function) @ VM936:1
Photo of David Maskasky

David Maskasky

  • 100 Points 100 badge 2x thumb
You can also do this with Image Onload Technique in Realm Branding if you have an enterprise account.