Note
You are browsing the Legacy version of this article. For the current version, see: Customising colour of charts on report custom dashboards
Colour customisation can be done on all types of charts in the Custom Dashboards following the the steps below.
Note: this customisation can only be done on charts in the Custom Dashboards, not the Built-in dashboards.
1. Select a Custom Dashboard.
2. Select Dashboard Layout
![](https://support.deskpro.com/file.php/local/19087095ZPJSPZGTCHBXBMW0/2021-08-12-dashboardlayout.png%22%20class=%22centered%22%20style=%22margin:%200.5rem%20auto;%22%20width=%22auto%22%20height=%22%22%3E%3C/div%3E%3Cbr%3E%3C/p%3E%3Cp%3E3.%20Hover%20over%20the%20title%20of%20your%20widget%20on%20the%20top%20left-hand%20corner%20and%20select%20%27Edit%20Widget%27.%3C/p%3E%3Cp%3E%3Cdiv%20style=%22text-align:%20center;%22%3E%3Cimg%20src=%22https://support-attachments.deskpro.com/19088/19087523SQKDXNYZGRWKRMZ0-1628761943567.png%22%20class=%22centered%22%20style=%22margin:%200.5rem%20auto;%22%20width=%22auto%22%20height=%22%22%3E%3C/div%3E%3C/p%3E%3Cp%3E4.%20%26nbsp;A%20pop-up%20window%20will%20appear.%20Under%20Widget%20Options,%20you%20can%20put%20in%20the%20code%20you%20would%20like%20to%20change%20the%20colour%20to.%20%26nbsp;%3C/p%3E%3Cp%3E%3Cdiv%20style=%22text-align:%20center;%22%3E%3Cimg%20src=%22https://support.deskpro.com/file.php/local/19087140NKWSTDMMNYAYMRQ0/2021-08-12-editwidgetpopup.png%22%20class=%22centered%22%20style=%22margin:%200.5rem%20auto;%22%20width=%22auto%22%20height=%22%22%3E%3C/div%3E%3Cbr%3E%3C/p%3E%3Cp%3EThe%20format%20is%20written%20as:%3C/p%3E%3Cp%3E%3Ccode%3E%7B%22colors%22:%5B%22%23COLOURCODE%22%5D%7D%3C/code%3E%3C/p%3E%3Cp%3EThe%20%23COLOURCODE%20will%20be%20where%20you%20insert%20the%20hex%20colour%20code.%20%26nbsp;Each%20colour%20is%20associated%20with%20a%20code.%20At%20the%20end%20of%20this%20article%20is%20a%20list%20of%20common%20colour%20codes%20that%20are%20used.%26nbsp;%3C/p%3E%3Cp%3EIn%20this%20example,%20to%20change%20the%20colour%20from%20blue%20to%20orange,%20the%20code%20below%20would%20be%20entered:%26nbsp;%3C/p%3E%3Cp%3E%3Ccode%3E%7B%22colors%22:%5B%22%23FF6600%22%5D%7D%3C/code%3E%3C/p%3E%3Cp%3E%3Cbr%3E%3C/p%3E%3Cp%3E5.%20Click%20Save%20Changes.%20The%20graph%20will%20be%20automatically%20updated%20as%20shown:%3C/p%3E%3Cp%3E%3Cdiv%20style=%22text-align:%20center;%22%3E%3Cimg%20src=%22https://support-attachments.deskpro.com/19088/19087541BHTTMBYAGASGTBT0-1628762061765.png%22%20class=%22centered%22%20style=%22margin:%200.5rem%20auto;%22%20width=%22auto%22%20height=%22%22%3E%3C/div%3E%3C/p%3E%3Cp%3E%3Cbr%3E%3C/p%3E%3Cp%3EIf%20you%20have%20more%20than%20one%20type%20of%20colour%20you%20would%20like%20to%20change,%20here%20is%20an%20example%20of%20how%20to%20change%20it.%20In%20this%20example,%20we%20will%20change%20the%20colour%20of%20the%20bar%20chart%20from%20blue%20and%20yellow%20to%20orange%20and%20green.%26nbsp;%3C/p%3E%3Cp%3E%3Cdiv%20style=%22text-align:%20center;%22%3E%3Cimg%20src=%22https://support-attachments.deskpro.com/19078/19077402PSANXTYAQGKWTXM0-1628698393945.png%22%20class=%22centered%22%20style=%22margin:%200.5rem%20auto;%22%20width=%22auto%22%20height=%22%22%3E%3C/div%3E%3C/p%3E%3Cp%3ERepeat%20Steps%201%20to%203%20from%20above,%20in%20Step%204,%20the%20format%20below%20is%20used:%26nbsp;%3C/p%3E%3Cp%3E%3Ccode%3E%7B%22colors%22:%5B%22%23COLOURCODE1%22,%20%22%23COLOURCODE2%22%5D%7D%3C/code%3E%3C/p%3E%3Cp%3EIn%20this%20example,%20it%20will%20be%20written%20as:%3C/p%3E%3Cp%3E%3Ccode%3E%7B%22colors%22:%5B%22%23FF6600%22,%20%22%23008000%20%22%5D%7D%3C/code%3E%3C/p%3E%3Cp%3E%3Cbr%3E%3C/p%3E%3Cp%3EClick%20on%20Save%20Changes,%20and%20the%20result%20can%20be%20automatically%20seen%20on%20the%20Dashboard.%3C/p%3E%3Cp%3E%3Cdiv%20style=%22text-align:%20center;%22%3E%3Cimg%20src=%22https://support-attachments.deskpro.com/19078/19077439PCNARCYQXCRHZGD0-1628698580018.png%22%20class=%22centered%22%20style=%22margin:%200.5rem%20auto;%22%20width=%22auto%22%20height=%22%22%3E%3C/div%3E%3Cbr%3E%3C/p%3E%3Cp%3EIf%20there%20is%20more%20than%20two%20colours%20in%20the%20graph,%20the%20same%20format%20would%20be%20used,%20with%20a%20comma%20separating%20each%20colour%20code.%3C/p%3E%3Cp%3EHere%20is%20a%20list%20of%20colour%20codes%20which%20could%20be%20useful%20to%20use:%3C/p%3E%3Ctable%3E%3Ctbody%3E%3Ctr%3E%3Cth%3E%3Cp%3EColour%3Cbr%3E%3C/p%3E%3C/th%3E%3Cth%3E%3Cp%3EHTML%20code%3Cbr%3E%3C/p%3E%3C/th%3E%3C/tr%3E%3Ctr%3E%3Ctd%3E%3Cp%3ERed%3C/p%3E%3C/td%3E%3Ctd%3E%3Cp%3E%23FF0000%3Cbr%3E%3C/p%3E%3C/td%3E%3C/tr%3E%3Ctr%3E%3Ctd%3E%3Cp%3EGreen%3Cbr%3E%3C/p%3E%3C/td%3E%3Ctd%3E%3Cp%3E%23008000%3Cbr%3E%3C/p%3E%3C/td%3E%3C/tr%3E%3Ctr%3E%3Ctd%3E%3Cp%3EBlue%3Cbr%3E%3C/p%3E%3C/td%3E%3Ctd%3E%3Cp%3E%230000FF%3Cbr%3E%3C/p%3E%3C/td%3E%3C/tr%3E%3Ctr%3E%3Ctd%3E%3Cp%3EOrange%3Cbr%3E%3C/p%3E%3C/td%3E%3Ctd%3E%3Cp%3E%23FF6600%3C/p%3E%3C/td%3E%3C/tr%3E%3Ctr%3E%3Ctd%3E%3Cp%3EPurple%3Cbr%3E%3C/p%3E%3C/td%3E%3Ctd%3E%3Cp%3E%23800080%3Cbr%3E%3C/p%3E%3C/td%3E%3C/tr%3E%3Ctr%3E%3Ctd%3E%3Cp%3EBlack%3Cbr%3E%3C/p%3E%3C/td%3E%3Ctd%3E%3Cp%3E%23000000%3Cbr%3E%3C/p%3E%3C/td%3E%3C/tr%3E%3Ctr%3E%3Ctd%3E%3Cp%3EGray%3Cbr%3E%3C/p%3E%3C/td%3E%3Ctd%3E%3Cp%3E%23808080%3Cbr%3E%3C/p%3E%3C/td%3E%3C/tr%3E%3C/tbody%3E%3C/table%3E%3Cp%3E%3Cbr%3E%3C/p%3E%3Cp%3EIf%20you%20would%20like%20other%20colour%20options,%20a%20range%20of%20colour%20codes%20can%20be%20found%20%3Ca%20href=%22https://htmlcolorcodes.com/%22%20target=%22_blank%22%3Ehere%3C/a%3E.%3C/p%3E%3Cp%3E%3Cbr%3E%3C/p%3E%3Cp%3E%3Cbr/%3E%3C/p)
Tilføj en kommentar
Log ind, eller opret dig for at skrive en kommentar.