I have created a Pie Chart. All the information is pulling correctly. I have the colors set in the legend box but I am not able to change the name. It is showing a '3' and '4' next to the color blocks. How can I change these numbers to names?

  • 0
  • 1
  • Question
  • Updated 11 months ago
  • Answered
Photo of Daniel

Daniel

  • 0 Points

Posted 6 years ago

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

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
QuickBase uses HighCharts for it charting package and HighCharts use <svg> technology. This means that irrespective of the features QuickBase or HighCharts has placed into their integrations or APIs, you can always directly manipulate the final <svg> just as you can manipulate a web page's DOM. So sidestepping QuickBase and HighCharts features, you can change the the charts labels from "3" to "Three" using this JavaScript code:
$("tspan:contains(3)").filter(function(){ return $(this).text() === "3"; }).html("Three");
Depending on your workflow and needs you can (1) inject this code manually (see before / after screenshots), (2) through a CrossRider extension; or (3) through a script in a containing page that the chart inserted through an <iframe> resides in.
Photo of Ryan

Ryan

  • 0 Points
It doesn’t look like I have the same console as you.  How would I access the editor?
Photo of Leanne

Leanne

  • 354 Points 250 badge 2x thumb
I'd also like to know how to obtain the console that's used in your example to update the javascript my reports are using. Thanks!!
Photo of Leanne

Leanne

  • 354 Points 250 badge 2x thumb
Found it on Chrome (Control - Shift - J) bam! Now on to figure out how to use it:)
Photo of Leanne

Leanne

  • 354 Points 250 badge 2x thumb
Dan, I'm able to edit the script within the console but it doesn't save the changes to my chart in Quickbase. Do you know the steps to take after editing the code in the console so that it is saved in Quickbase? Thanks so much!
Photo of Mohsen Shojaeifar

Mohsen Shojaeifar

  • 60 Points
the chrome console is for seeing the reaction of changed parameters so it is  just for debugging.