{"id":2099772,"date":"2023-10-25T00:01:59","date_gmt":"2023-10-25T07:01:59","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2099772"},"modified":"2023-10-30T05:30:24","modified_gmt":"2023-10-30T12:30:24","slug":"introducing-custom-colors-in-pop-up-charts","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/introducing-custom-colors-in-pop-up-charts","title":{"rendered":"Introducing custom colors in pop-up charts"},"author":58731,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[26781,30791,33371,366492,771812],"industry":[],"product":[36551],"class_list":["post-2099772","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-chart","tag-color","tag-map-viewer","tag-pop-up","tag-whats-new-october-2023","product-arcgis-online"],"acf":{"authors":[{"ID":58731,"user_firstname":"Lauren","user_lastname":"Ballantyne","nickname":"Lauren Ballantyne","user_nicename":"lballantyne","display_name":"Lauren Ballantyne","user_email":"lballantyne@esri.com","user_url":"","user_registered":"2020-06-30 19:39:04","user_description":"Lauren Ballantyne is a Product Engineer on the ArcGIS Online team and has a background in environmental science and conservation ecology. Her feature areas include Map Viewer, Arcade, and hosted feature layer views. Lauren is passionate about developing intuitive tools that help create engaging, informative, and data-rich web maps.","user_avatar":""}],"short_description":"Emphasize trends and elevate your maps by customizing pop-up chart colors. ","flexible_content":[{"acf_fc_layout":"content","content":"

Pop-up chart color customization is here! That\u2019s right, with the October 2023 update of ArcGIS Online you have full control over the colors in your pop-up charts. This feature is a great tool for curating professional and impactful maps.\u00a0<\/span>\u00a0<\/span><\/p>\n

Let\u2019s explore some of the ways you can use custom chart colors to elevate your maps and apps.\u00a0<\/span>\u00a0<\/span><\/p>\n

1. Match the theme of your app<\/span><\/b>\u00a0<\/span><\/p>\n

When designing your apps, you might have a go-to color scheme and carrying those colors throughout your app can take it to the next level. That\u2019s where custom pop-up chart colors come in. You can set the chart colors to match those in your app to give an extra touch of refinement.<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2112732,"id":2112732,"title":"MatchChartColorToAppTheme","filename":"MatchChartColorToAppTheme.jpg","filesize":165625,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/introducing-custom-colors-in-pop-up-charts\/matchchartcolortoapptheme","alt":"","author":"58731","description":"","caption":"","name":"matchchartcolortoapptheme","status":"inherit","uploaded_to":2099772,"date":"2023-10-24 17:00:26","modified":"2023-10-24 17:00:26","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1443,"height":926,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme.jpg","medium-width":407,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme.jpg","medium_large-width":768,"medium_large-height":493,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme.jpg","large-width":1443,"large-height":926,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme.jpg","1536x1536-width":1443,"1536x1536-height":926,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme.jpg","2048x2048-width":1443,"2048x2048-height":926,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme-725x465.jpg","card_image-width":725,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/MatchChartColorToAppTheme.jpg","wide_image-width":1443,"wide_image-height":926}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

2. Match your layer style colors<\/span><\/b>\u00a0<\/span><\/p>\n

You now have the freedom to set your chart colors to match the colors of any renderer. Matching the chart colors to those used to style the layer gives a map a cohesive look.<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2112742,"id":2112742,"title":"URVColorMatch","filename":"URVColorMatch.jpg","filesize":97899,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/introducing-custom-colors-in-pop-up-charts\/urvcolormatch","alt":"","author":"58731","description":"","caption":"","name":"urvcolormatch","status":"inherit","uploaded_to":2099772,"date":"2023-10-24 17:01:43","modified":"2023-10-24 17:01:43","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":964,"height":603,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch.jpg","medium-width":417,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch.jpg","medium_large-width":768,"medium_large-height":480,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch.jpg","large-width":964,"large-height":603,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch.jpg","1536x1536-width":964,"1536x1536-height":603,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch.jpg","2048x2048-width":964,"2048x2048-height":603,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch-743x465.jpg","card_image-width":743,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/URVColorMatch.jpg","wide_image-width":964,"wide_image-height":603}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

3. Match other pop-up content colors<\/span><\/b>\u00a0<\/span><\/p>\n

Matching connected content together through color helps highlight information, draw conclusions, and elevate your pop-up.\u00a0<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2112752,"id":2112752,"title":"POpupContentColorMatching","filename":"POpupContentColorMatching.jpg","filesize":65889,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/introducing-custom-colors-in-pop-up-charts\/popupcontentcolormatching","alt":"","author":"58731","description":"","caption":"","name":"popupcontentcolormatching","status":"inherit","uploaded_to":2099772,"date":"2023-10-24 17:02:32","modified":"2023-10-24 17:02:32","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":682,"height":465,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching.jpg","medium-width":383,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching.jpg","medium_large-width":682,"medium_large-height":465,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching.jpg","large-width":682,"large-height":465,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching.jpg","1536x1536-width":682,"1536x1536-height":465,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching.jpg","2048x2048-width":682,"2048x2048-height":465,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching.jpg","card_image-width":682,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/POpupContentColorMatching.jpg","wide_image-width":682,"wide_image-height":465}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

How to configure chart colors<\/span><\/b>\u00a0<\/span><\/h2>\n

In Map Viewer, you can author pop-up charts using chart content elements and <\/span>Arcade content elements<\/span><\/a>. We\u2019ll go through how to add color in both scenarios.\u00a0<\/span>\u00a0<\/span><\/p>\n

Chart content elements<\/span><\/b>\u00a0<\/span><\/h3>\n

Once you\u2019ve added a chart and selected fields to populate the chart, you\u2019re ready to customize the chart colors. For bar and pie charts, simply click the color ramp and toggle through the available ramps. Line charts are represented by a single color, so you\u2019ll use a color picker or HEX, RGB, or HSV inputs to set your color of choice.\u00a0<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2112762,"id":2112762,"title":"ToggleColorRamps","filename":"ToggleColorRamps.gif","filesize":269320,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/introducing-custom-colors-in-pop-up-charts\/togglecolorramps","alt":"","author":"58731","description":"","caption":"","name":"togglecolorramps","status":"inherit","uploaded_to":2099772,"date":"2023-10-24 17:03:41","modified":"2023-10-24 17:03:41","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1181,"height":783,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps.gif","medium-width":394,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps.gif","medium_large-width":768,"medium_large-height":509,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps.gif","large-width":1181,"large-height":783,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps.gif","1536x1536-width":1181,"1536x1536-height":783,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps.gif","2048x2048-width":1181,"2048x2048-height":783,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps-701x465.gif","card_image-width":701,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ToggleColorRamps.gif","wide_image-width":1181,"wide_image-height":783}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

If the <\/span>col<\/span>or ramps <\/span>don\u2019t<\/span> fit your needs or you want to <\/span>adjust <\/span>col<\/span>ors on a field-by-field basis for your bar and pie charts, you can do that<\/span> by clicking on the <\/span>col<\/span>or icon beside <\/span>each field.<\/span> You can then set t<\/span>he <\/span>col<\/span>or using the <\/span>col<\/span>or picker or <\/span>col<\/span>or value inputs.<\/span><\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2112772,"id":2112772,"title":"ChangeIndividualColor","filename":"ChangeIndividualColor.gif","filesize":319898,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/introducing-custom-colors-in-pop-up-charts\/changeindividualcolor","alt":"","author":"58731","description":"","caption":"","name":"changeindividualcolor","status":"inherit","uploaded_to":2099772,"date":"2023-10-24 17:04:23","modified":"2023-10-24 17:04:23","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1181,"height":783,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor.gif","medium-width":394,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor.gif","medium_large-width":768,"medium_large-height":509,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor.gif","large-width":1181,"large-height":783,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor.gif","1536x1536-width":1181,"1536x1536-height":783,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor.gif","2048x2048-width":1181,"2048x2048-height":783,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor-701x465.gif","card_image-width":701,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/10\/ChangeIndividualColor.gif","wide_image-width":1181,"wide_image-height":783}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Pro tips:<\/span><\/b> 1) When playing around with colors for line charts or on a per field basis, click the + button to save them for easy reuse. 2) If you want to revert to the default color ramp, Olympic Sunset, simply click the <\/span>Reset to default colors<\/span><\/b> button. If you have fields in your chart that are also used to style the layer and the style type is either Predominant category, Charts, or Dot density then custom colors will reset to those set in the renderer.<\/span>\u00a0<\/span><\/p>\n

Arcade content elements<\/span><\/b>\u00a0<\/span><\/h3>\n

Arcade content elements are arcade expressions that return an entire content element, which can be text, field lists, or charts. If you aren\u2019t sure how to build charts using Arcade or what the benefits are then check out this <\/span>introductory blog<\/span><\/a> by my colleague, Paul. With this update, the chart template includes a <\/span>colors<\/i> property<\/span> where you can add RGB values to drive the colors of your chart. <\/span>\u00a0<\/span><\/p>\n

To better understand how to use the <\/span>colors<\/span><\/i> property, let\u2019s look at how we can add a splash of color to the chart in Paul\u2019s <\/span>blog map<\/span><\/a>. When opening the map and clicking on a precinct, we see a chart showing the number of crimes, categorized by type, in that precinct. To better relate the information displayed in the chart to the crimes layer, we can set the colors of the bars to match the colors of the corresponding crime symbols. I adjusted Paul\u2019s expression to include the following:\u00a0<\/span>\u00a0<\/span><\/p>\n