{"id":516242,"date":"2022-06-10T14:09:47","date_gmt":"2022-06-10T21:09:47","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&#038;p=516242"},"modified":"2022-06-10T15:48:30","modified_gmt":"2022-06-10T22:48:30","slug":"make-your-pop-up-charts-pop-in-arcgis-online","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online","title":{"rendered":"Make Your Pop-up Charts Pop in ArcGIS Online"},"content":{"rendered":"","protected":false},"author":8132,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[10392,358402],"tags":[163382,419082,295152,479642,411322],"arcwatch_issues":[479412],"class_list":["post-516242","arcwatch","type-arcwatch","status-publish","format-standard","hentry","category-arcgis-online","category-learn-arcgis","tag-arcgis-online","tag-charts","tag-map-viewer","tag-pop-up-charts","tag-pop-ups","arcwatch_issues-june-2022","arcwatch_sections-the-tip"],"acf":{"short_description":"Get the most out of the pop-up charts available to you in ArcGIS Online, and learn how to configure them to best represent your data.","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Layer pop-ups in ArcGIS Online are essential parts of authoring a good web map and can transform an otherwise dull list of attributes into a far more meaningful display of information for your audience. Charts are one of the most important features you can include in a pop-up, providing a visual and engaging way to present numeric attribute information.\r\n\r\nIn this tip, you will learn how to add and configure bar, line, and pie charts in pop-ups. Open the <a href=\"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html?webmap=e1669785533b45eb906c20cab4fb9baa\">completed sample map<\/a> to view the configured pop-up charts. The map contains an unconfigured layer you can use to follow along in this tutorial, plus a layer configured with the charts described below. Click any feature to view the bar, line, and pie charts. The sample data focuses on crime statistics by neighborhood.\r\n\r\n<strong>Add chart elements to pop-ups<\/strong>\r\n\r\n<strong>Step 1:<\/strong> Open the <a href=\"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html?webmap=e1669785533b45eb906c20cab4fb9baa\">sample map<\/a> and sign in to your ArcGIS account. Save the map.\r\n\r\n<strong>Step 2:<\/strong> Open the Layers pane in the Contents (dark) toolbar. Hide the Neighborhood Crime Totals (charts) layer, and show the Neighborhood Crime Totals (unconfigured) layer."},{"acf_fc_layout":"image","image":516372,"image_position":"center","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 3:<\/strong> Ensure that the unconfigured layer is selected. In the Settings (light) toolbar, click Configure pop-ups."},{"acf_fc_layout":"image","image":516382,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 4:<\/strong> We will not need the default Fields list element, so it can be deleted. Click options (\u2026), then Delete."},{"acf_fc_layout":"image","image":516392,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 5:<\/strong> Add a chart element. Click Add content, then choose Chart."},{"acf_fc_layout":"image","image":516402,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 6:<\/strong> Configure the chart.\r\n\r\nWhile each chart is different, the chart configuration pane is similar for each chart type.\r\n\r\nBar charts are best used to show data in discrete categories. Spaces between the elements separate the values. Bar charts can be oriented vertically or horizontally.\r\n\r\nLine charts can be used to show change over time. A line chart implies an inherent order, progressing from left to right.\r\n\r\nPie charts are effective for showing the parts of a whole. All attributes shown in the pie should add up to 100 percent.\r\n\r\nBar charts are the default but note that Line and Pie are also options.\r\n\r\nFor this tip, you will create a media group containing three different styles of charts (vertical bar, horizontal bar, and line) that display the same crime totals data for 2001 to 2010. Then you will add another media group with a pie chart that displays crimes by type for 2010.\r\n\r\n<strong>a.<\/strong> Choose a title, caption, and alternative text for the chart (optional).\r\n\r\n<strong>b.<\/strong> Click Select fields."},{"acf_fc_layout":"image","image":516412,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>c.<\/strong> Choose the desired fields to populate the chart. In this example, we will use the yearly count fields (2001 to 2010). A check mark appears when you select a field."},{"acf_fc_layout":"image","image":516422,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"Click Done when finished selecting fields. Add the title Crime Totals by Year (2001-2010), then click Done again.\r\n\r\n<strong>Step 7:<\/strong> Click the blue circle with a + sign to add a horizontal bar chart and create a media group."},{"acf_fc_layout":"image","image":516432,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 8: <\/strong>Choose Chart."},{"acf_fc_layout":"image","image":516442,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 9:<\/strong> Click Select fields and choose the same fields as you did in step 6 above. When finished, click Done then scroll to the bottom and set the orientation to Horizontal. When finished, click Done again."},{"acf_fc_layout":"image","image":516292,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 10:<\/strong> Click + and Chart. This time, select Line as the chart type."},{"acf_fc_layout":"image","image":516302,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 11:<\/strong> Complete the chart configuration using the same yearly total fields (2001\u20132010) and enter the title.\r\n\r\nThe media group you have just created contains three charts: a vertical bar chart, a horizontal bar chart, and a line chart. You can hover over each chart to learn more about the data. Click the arrows on the left and right sides of the media group to advance to the next chart."},{"acf_fc_layout":"image","image":516312,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 12:<\/strong> Add a pie chart below the media group you just created that will use data on crimes by type for 2010.\r\n\r\nClick Add content, then select Chart."},{"acf_fc_layout":"image","image":516322,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 13:<\/strong> Select Pie as the chart type, enter Crimes by Type (2010) as the title, then click Select fields."},{"acf_fc_layout":"image","image":516332,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 14:<\/strong> Select the fields that total the types of crimes: Theft, Assault, Battery, Burglary, Criminal Damage, Motor Vehicle Theft, Narcotics, Other Offense, Robbery, and All Other Crimes. Make sure to select All Other Crimes. Click Done when finished."},{"acf_fc_layout":"image","image":516342,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 15:<\/strong> Complete the chart configuration by adding an optional description. Click Done when finished. Save the map.\r\n\r\nOn the map, click on a neighborhood to see the pop-up containing the bar and line charts on total crime. Scroll down to see the pie chart that shows various crime types. Hover over each pie slice to get more information about the data."},{"acf_fc_layout":"image","image":516352,"image_position":"left","orientation":"vertical","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>More information<\/strong>\r\n\r\nFor more information, see the following:\r\n<ul>\r\n \t<li><a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/create-maps\/configure-pop-ups-mv.htm\">Configure pop-ups<\/a><\/li>\r\n \t<li><a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/get-started\/view-pop-ups-mv.htm\">View pop-ups<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/configure-pop-ups-basics\/\">Pop-ups: the essentials<\/a><\/li>\r\n<\/ul>"}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Make Your Pop-up Charts Pop in ArcGIS Online<\/title>\n<meta name=\"description\" content=\"In this tip, learn how to add and configure bar, line, and pie charts using layer pop-ups in ArcGIS Online.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Your Pop-up Charts Pop in ArcGIS Online\" \/>\n<meta property=\"og:description\" content=\"In this tip, learn how to add and configure bar, line, and pie charts using layer pop-ups in ArcGIS Online.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-10T22:48:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2022\/06\/chart-b.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online\",\n\t            \"name\": \"Make Your Pop-up Charts Pop in ArcGIS Online\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2022-06-10T21:09:47+00:00\",\n\t            \"dateModified\": \"2022-06-10T22:48:30+00:00\",\n\t            \"description\": \"In this tip, learn how to add and configure bar, line, and pie charts using layer pop-ups in ArcGIS Online.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"ArcWatch Articles\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"Make Your Pop-up Charts Pop in ArcGIS Online\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/e60e24920b007ddc82488e84e5138af4\",\n\t            \"name\": \"Ben Van Voorhis\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2022\/02\/bsmith-profile-2-768x768.jpg\",\n\t                \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2022\/02\/bsmith-profile-2-768x768.jpg\",\n\t                \"caption\": \"Ben Van Voorhis\"\n\t            },\n\t            \"description\": \"Ben Van Voorhis is the editor of ArcUser, and the former editor of Esri's ArcWatch publication. He has worked as a real estate writer and literary magazine editor, and holds creative writing degrees from the University of California, Riverside and Eastern Washington University.\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/author\/b-smith\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Make Your Pop-up Charts Pop in ArcGIS Online","description":"In this tip, learn how to add and configure bar, line, and pie charts using layer pop-ups in ArcGIS Online.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online","og_locale":"en_US","og_type":"article","og_title":"Make Your Pop-up Charts Pop in ArcGIS Online","og_description":"In this tip, learn how to add and configure bar, line, and pie charts using layer pop-ups in ArcGIS Online.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2022-06-10T22:48:30+00:00","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2022\/06\/chart-b.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online","url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online","name":"Make Your Pop-up Charts Pop in ArcGIS Online","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2022-06-10T21:09:47+00:00","dateModified":"2022-06-10T22:48:30+00:00","description":"In this tip, learn how to add and configure bar, line, and pie charts using layer pop-ups in ArcGIS Online.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/make-your-pop-up-charts-pop-in-arcgis-online#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"ArcWatch Articles","item":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch"},{"@type":"ListItem","position":3,"name":"Make Your Pop-up Charts Pop in ArcGIS Online"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/e60e24920b007ddc82488e84e5138af4","name":"Ben Van Voorhis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2022\/02\/bsmith-profile-2-768x768.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2022\/02\/bsmith-profile-2-768x768.jpg","caption":"Ben Van Voorhis"},"description":"Ben Van Voorhis is the editor of ArcUser, and the former editor of Esri's ArcWatch publication. He has worked as a real estate writer and literary magazine editor, and holds creative writing degrees from the University of California, Riverside and Eastern Washington University.","url":"https:\/\/www.esri.com\/about\/newsroom\/author\/b-smith"}]}},"sort_order":"2","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/516242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcwatch"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/8132"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/516242\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=516242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=516242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=516242"},{"taxonomy":"arcwatch_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch_issues?post=516242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}