{"id":22434,"date":"2022-04-20T09:18:48","date_gmt":"2022-04-20T09:18:48","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=22434"},"modified":"2026-01-13T11:24:34","modified_gmt":"2026-01-13T11:24:34","slug":"how-to-display-a-chart-inside-the-tooltip","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/how-to-display-a-chart-inside-the-tooltip\/","title":{"rendered":"How to display a chart inside the tooltip?"},"content":{"rendered":"<p>In this tutorial, I will show you how to render a chart inside of a tooltip.<\/p>\n<p>Let&#8217;s get started.<\/p>\n<p>Creating a chart within a tooltip can be useful, for example, to visualize more information \u200b\u200bor correlation in a given data point. <\/p>\n<p><i><b>Remark<\/b><br \/>\nIf you are not familiar with the tooltip options, feel free to check the <a href=\"https:\/\/api.highcharts.com\/highcharts\/tooltip\" target=\"_blank\" rel=\"noopener\">tooltip<\/a> and the <a href=\"https:\/\/api.highcharts.com\/highcharts\/tooltip.useHTML\" target=\"_blank\" rel=\"noopener\">tooltip useHTML<\/a> documentation for further information regarding the main options used in this article.<br \/>\n<\/i><\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 580px; border: none;\" title=\"A line chart displays random data, whereas the tooltip displays a pie chart for more information\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/chart-inside-tooltip\" height=\"450\"><\/iframe><\/p>\n<p>There are four steps to create the chart inside a tooltip:<\/p>\n<ol>\n<li>Be sure to set useHTML to true and return the replaced HTML tooltip element in the tooltip.pointFormat.<\/li>\n<li>Create the rendering function as follow:\n<pre>function renderChart(point) {\r\n  Highcharts.chart(\"hc-tooltip\", {\r\n    chart: {\r\n      type: \"pie\"\r\n    },\r\n    title: {\r\n      text: \"Chart inside tooltip\"\r\n    },\r\n    series: [\r\n      {\r\n        data: point.options.eData,\r\n        dataLabels: {\r\n          enabled: false\r\n        }\r\n      }\r\n    ]\r\n  });\r\n}<\/pre>\n<\/li>\n<li>Then, on the tooltip event, I call the renderChart function for individual points of the main chart:\n<pre>Highcharts.addEvent(Highcharts.Tooltip, \"refresh\", function () {\r\n  renderChart(this.chart.hoverPoint);\r\n});\r\n<\/pre>\n<\/li>\n<li>Finally, in the main chart object the tooltip.pointFormat gets the following code:\n<pre>tooltip: {\r\n   useHTML: true,\r\n   headerFormat: '',\r\n   pointFormat: '&lt;div id=\"hc-tooltip\"&gt;&lt;\/div&gt;'\r\n }<\/pre>\n<\/li>\n<\/ol>\n<p>Now, you are ready to add more information to your chart using the tooltip. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create a chart inside a tooltip to share more information about each point.<\/p>\n","protected":false},"author":255,"featured_media":22441,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,1031],"coauthors":[844],"class_list":["post-22434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/255"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=22434"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22434\/revisions"}],"predecessor-version":[{"id":24061,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/22434\/revisions\/24061"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/22441"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=22434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=22434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=22434"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=22434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}