{"id":21343,"date":"2020-11-02T10:47:53","date_gmt":"2020-11-02T10:47:53","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=21343"},"modified":"2026-01-13T10:00:26","modified_gmt":"2026-01-13T10:00:26","slug":"net-pie-a-payslip-visualisation","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/net-pie-a-payslip-visualisation\/","title":{"rendered":"Net pie &#8211; a payslip visualisation"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>This sunburst, or pie diagram with two levels, shows an attractive way to display an employee&#8217;s earnings, which payroll components are deducted, and the final net payout for the payslip. You can easily see the ratio of deductions versus earnings. By the way, the earnings always take half a circle.<\/p>\n<p class=\"demo-container\"><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\"  src=\"https:\/\/codepen.io\/mushigh\/embed\/xxLYavY?default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A pie chart displays payroll components are deducted, and the final net payout for the payslip. By Mustapha Mekhatria\"><br \/>\n  See the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/xxLYavY\"><br \/>\n  Net pie &#8211; a payslip visualisation<\/a> by mustapha mekhatria (<a href=\"https:\/\/codepen.io\/mushigh\">@mushigh<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>\nCheck out more <a href=\"https:\/\/www.highcharts.com\/demo\" target=\"_blank\" rel=\"noopener\">Highcharts demos<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; This sunburst, or pie diagram with two levels, shows an attractive way to display an employee&#8217;s earnings, which payroll components are deducted, and the final net payout for the payslip. You can easily see the ratio of deductions versus earnings. By the way, the earnings always take half a circle. See the Pen Net [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":21433,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094],"coauthors":[699],"class_list":["post-21343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21343","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\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=21343"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21343\/revisions"}],"predecessor-version":[{"id":29317,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/21343\/revisions\/29317"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21433"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=21343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=21343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=21343"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=21343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}