{"id":32902,"date":"2017-11-08T12:25:37","date_gmt":"2017-11-08T04:25:37","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=32902"},"modified":"2024-06-10T12:10:20","modified_gmt":"2024-06-10T04:10:20","slug":"styling-charts","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-charts\/","title":{"rendered":"Styling Charts"},"content":{"rendered":"\n<p class=\"intro-text\">This article describes the styling properties of each component in the Chart <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1837\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/chartsicon_sm.png\" alt=\"\" width=\"22\" height=\"17\" \/><\/a> group in IFS OI Explorer Studio. For an overview of how styling works, see <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/\">Overview of Styles in IFS OI Explorer<\/a>.<\/p>\n<h2 class=\"page-subheading\">Bullet Graph<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/bullet-graph\/\">Bullet Graph tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Bullet Graph<\/strong> in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17953\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base.png\" alt=\"bullet-graph-base\" width=\"335\" height=\"163\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base.png 335w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-graph-base-48x23.png 48w\" sizes=\"auto, (max-width: 335px) 100vw, 335px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Bullet Graph you can change the colour of the bar indicating the actual value, and the target line.<\/p>\n<p><strong>1. Actual Bar<\/strong>: Set the colour of the value bar.<\/p>\n<ul>\n<li>Actual Background Colour<\/li>\n<\/ul>\n<p><strong>2. Target<\/strong>: Style the line indicating the target.<\/p>\n<ul>\n<li>Target Line Colour<\/li>\n<li>Target Line Thickness<\/li>\n<li>Target Line Style<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Actual bar<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17954\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style.png\" alt=\"bullet-actual-style\" width=\"200\" height=\"69\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style.png 200w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style-150x52.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-style-48x17.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17955\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop.png\" alt=\"bullet-actual-prop\" width=\"408\" height=\"61\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop-150x22.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-actual-prop-48x7.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Target line<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17956\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style.png\" alt=\"bullet-target-style\" width=\"200\" height=\"70\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style.png 200w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style-150x53.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-style-48x17.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17957\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop.png\" alt=\"bullet-target-prop\" width=\"408\" height=\"130\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop-150x48.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/bullet-target-prop-48x15.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Chart<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/charts\/\">Chart tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows a discrete chart (left) and continuous chart (right) in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18396\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base.png\" alt=\"chart-base\" width=\"906\" height=\"451\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base.png 906w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-768x382.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-base-48x24.png 48w\" sizes=\"auto, (max-width: 906px) 100vw, 906px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Chart you can change the appearance of the axes, gridlines, legend, tooltip, and hairline.<\/p>\n<p><strong>1. Axis Ticks<\/strong>: Style the text along the X and Y axes.<\/p>\n<ul style=\"columns: 2;\">\n<li>Axis Ticks Font Family<\/li>\n<li>Axis Ticks Font Colour<\/li>\n<li>Axis Ticks Font Size<\/li>\n<li>Axis Ticks Font Weight<\/li>\n<li>Axis Ticks Underline<\/li>\n<li>Axis Ticks Text Case<\/li>\n<\/ul>\n<p><strong>2. Axis Label<\/strong>: Style the label text for the x-axis.<\/p>\n<ul style=\"columns: 2;\">\n<li>Axis Label Font Family<\/li>\n<li>Axis Label Font Colour<\/li>\n<li>Axis Label Font Size<\/li>\n<li>Axis Label Font Weight<\/li>\n<li>Axis Label Underline<\/li>\n<li>Axis Label Text Case<\/li>\n<\/ul>\n<p><strong>3. Legend<\/strong>: Style the text inside the legend.<\/p>\n<ul style=\"columns: 2;\">\n<li>Legend Font Family<\/li>\n<li>Legend Font Colour<\/li>\n<li>Legend Font Size<\/li>\n<li>Legend Font Weight<\/li>\n<li>Legend Underline<\/li>\n<li>Legend Text Case<\/li>\n<\/ul>\n<p><strong>4. Tooltip<\/strong>: Style the text inside the tooltip popup in discrete charts.<\/p>\n<ul style=\"columns: 2;\">\n<li>Tooltip Font Family<\/li>\n<li>Tooltip Font Colour<\/li>\n<li>Tooltip Font Size<\/li>\n<li>Tooltip Font Weight<\/li>\n<li>Tooltip Underline<\/li>\n<li>Tooltip Text Case<\/li>\n<\/ul>\n<\/td>\n<td>\n<p><strong>5. Hairline<\/strong>: Style the appearance of the hairline in continuous charts.<\/p>\n<ul style=\"columns: 2;\">\n<li>Hairline Colour<\/li>\n<li>Hairline Thickness<\/li>\n<li>Hairline Style<\/li>\n<li>\u00a0<\/li>\n<\/ul>\n<p><strong>6. Hairline Popup<\/strong>: Style the text inside the hairline popup in continuous charts.<\/p>\n<ul style=\"columns: 2;\">\n<li>Hairline Font Family<\/li>\n<li>Hairline Font Colour<\/li>\n<li>Hairline Font Size<\/li>\n<li>Hairline Font Weight<\/li>\n<li>Hairline Underline<\/li>\n<li>Hairline Text Case<\/li>\n<\/ul>\n<p><strong>7. Gridline<\/strong>: Style the vertical and horizontal lines on the chart canvas.<\/p>\n<ul style=\"columns: 2;\">\n<li>Gridline Colour<\/li>\n<li>Gridline Thickness<\/li>\n<li>Gridline Style<\/li>\n<\/ul>\n<p><strong>8. Line Series, Bar Series, Area Series, Dot Series<\/strong>: Style the trace on the chart canvas.<\/p>\n<ul style=\"columns: 2;\">\n<li>Line Series Opacity<\/li>\n<li>Line Series Thickness<\/li>\n<li>Line Series Style<\/li>\n<li>Bar Series Opacity (also applies to stacked bar charts)<\/li>\n<li>Area Series Opacity<\/li>\n<li>Dot Series Opacity<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis ticks<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18398\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style.png\" alt=\"chart-axis-ticks-style\" width=\"414\" height=\"300\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style-150x109.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-style-48x35.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18399\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop.png\" alt=\"chart-axis-ticks-prop\" width=\"409\" height=\"238\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-ticks-prop-48x28.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis label<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18400\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style.png\" alt=\"chart-axis-label-style\" width=\"409\" height=\"302\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style-150x111.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-style-48x35.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18401\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop.png\" alt=\"chart-axis-label-prop\" width=\"409\" height=\"236\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-axis-label-prop-48x28.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the legend<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18402\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style.png\" alt=\"chart-legend-style\" width=\"407\" height=\"304\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style.png 407w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style-150x112.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-style-48x36.png 48w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18403\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop.png\" alt=\"chart-legend-prop\" width=\"410\" height=\"238\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop.png 410w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-legend-prop-48x28.png 48w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the tooltip in a discrete chart<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18404\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style.png\" alt=\"chart-tt-style\" width=\"408\" height=\"284\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style.png 408w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style-150x104.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style-24x17.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style-36x25.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-style-48x33.png 48w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18405\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop.png\" alt=\"chart-tt-prop\" width=\"409\" height=\"236\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop.png 409w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-tt-prop-48x28.png 48w\" sizes=\"auto, (max-width: 409px) 100vw, 409px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the hairline and hairline popup in a continuous chart<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18406\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style.png\" alt=\"chart-hairline-style\" width=\"355\" height=\"295\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style.png 355w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style-150x125.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-style-48x40.png 48w\" sizes=\"auto, (max-width: 355px) 100vw, 355px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18407\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop.png\" alt=\"chart-hairline-prop\" width=\"414\" height=\"385\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop.png 414w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop-150x139.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop-24x22.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop-36x33.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-hairline-prop-48x45.png 48w\" sizes=\"auto, (max-width: 414px) 100vw, 414px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the gridlines<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18408\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style.png\" alt=\"chart-grid-style\" width=\"331\" height=\"294\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style.png 331w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style-150x133.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-style-48x43.png 48w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18409\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop.png\" alt=\"chart-grid-prop\" width=\"416\" height=\"137\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-grid-prop-48x16.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the opacity of the trace in a bar chart<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18410\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity.png\" alt=\"chart-bar-opacity\" width=\"412\" height=\"279\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity.png 412w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-150x102.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-48x33.png 48w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop.png\" rel=\"lightbox-20\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18411\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop.png\" alt=\"chart-bar-opacity-prop\" width=\"416\" height=\"67\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop.png 416w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop-150x24.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop-36x6.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-bar-opacity-prop-48x8.png 48w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the style of the trace in a line chart<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style.png\" rel=\"lightbox-21\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18412\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style.png\" alt=\"chart-line-style\" width=\"329\" height=\"292\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style.png 329w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style-150x133.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-style-48x43.png 48w\" sizes=\"auto, (max-width: 329px) 100vw, 329px\" \/><\/a><\/p>\n<\/td>\n<td style=\"padding-left: 5px;\" width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop.png\" rel=\"lightbox-22\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18413\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop.png\" alt=\"chart-line-prop\" width=\"407\" height=\"132\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop.png 407w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop-150x49.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/chart-line-prop-48x16.png 48w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Embedded Trend<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/embedded-trend\/\">Embedded Trend<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Embedded Trend<\/strong><b> <\/b>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled.png\" rel=\"lightbox-23\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26725 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled.png\" alt=\"\" width=\"838\" height=\"480\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled.png 838w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-768x440.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-150x86.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Embedded-Trend-Unstyled-48x27.png 48w\" sizes=\"auto, (max-width: 838px) 100vw, 838px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\" colspan=\"2\">\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Embedded Trend you can change the appearance of the axes, gridlines, legend, tooltip, and hairline.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"padding-left: 5px;\">\n<p><strong>1. Axis Ticks<\/strong>: Style of the text along the X and Y axes.<\/p>\n<ul>\n<li>Axis Ticks Font Family<\/li>\n<li>Axis Ticks Font Colour<br \/>\n(Tip: if you change this, the y-axis colour no longer corresponds to the selected series.)<\/li>\n<li>Axis Ticks Font Size<\/li>\n<li>Axis Ticks Font Weight<\/li>\n<\/ul>\n<p><strong>2. Hairline<\/strong>: Style the hairlines.<\/p>\n<ul>\n<li>Hairline Colour<\/li>\n<li>Hairline Style<\/li>\n<\/ul>\n<p><strong>3. Hairline Popup<\/strong>: Style the text inside the hairline popup.<\/p>\n<ul>\n<li>Hairline Popup Font Family<\/li>\n<li>Hairline Popup Font Colour<\/li>\n<li>Hairline Popup Font Size<\/li>\n<li>Hairline Popup Font Weight<\/li>\n<li>Hairline Popup Text Case<\/li>\n<\/ul>\n<\/td>\n<td>\n<p><strong>4. Gridline<\/strong>: Style the vertical and horizontal grid lines.<\/p>\n<ul>\n<li>Gridline Colour<br \/>\n(Tip: select an opacity of 0 for transparent gridlines.)<\/li>\n<li>Gridline Thickness<\/li>\n<li>Gridline Style<\/li>\n<\/ul>\n<p><strong>5. Line Series<\/strong>: Style the trace lines on the embedded trend.<\/p>\n<ul>\n<li>Line Series Opacity<\/li>\n<li>Line Series Thickness<\/li>\n<li>Line Series Style<\/li>\n<\/ul>\n<p><strong>6. Legend Icons<\/strong>:<\/p>\n<ul>\n<li>Background Colour<\/li>\n<li>Border Colour<\/li>\n<\/ul>\n<p><strong>7. Legend Text<\/strong>: Style the legend text<\/p>\n<ul>\n<li>Font<\/li>\n<li>Font Size<\/li>\n<li>Font Colour<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis ticks<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1.png\" rel=\"lightbox-24\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26730 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-1-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2.png\" rel=\"lightbox-25\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26735 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2.png\" alt=\"\" width=\"475\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2.png 475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Axis-Ticks-2-48x18.png 48w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the hairline<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2.png\" rel=\"lightbox-26\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26759 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-Styling-2-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1.png\" rel=\"lightbox-27\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26760 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1.png\" alt=\"\" width=\"532\" height=\"115\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1.png 532w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1-150x32.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Hairline-styling-1-48x10.png 48w\" sizes=\"auto, (max-width: 532px) 100vw, 532px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the gridline style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1.png\" rel=\"lightbox-28\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26728 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/gridline-1-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2.png\" rel=\"lightbox-29\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26734 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2.png\" alt=\"\" width=\"475\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2.png 475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Gridline-2-48x18.png 48w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the line series style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1.png\" rel=\"lightbox-30\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26727 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-1-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2.png\" rel=\"lightbox-31\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26731 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2.png\" alt=\"\" width=\"475\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2.png 475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Line-Series-2-48x18.png 48w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the legend icons style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1.png\" rel=\"lightbox-32\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26763 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1.png\" alt=\"\" width=\"300\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1.png 300w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1-150x88.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-icons-1a-1-48x28.png 48w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2.png\" rel=\"lightbox-33\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-26732 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2.png\" alt=\"\" width=\"475\" height=\"175\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2.png 475w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2-150x55.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2017\/05\/Legend-Icons-2-48x18.png 48w\" sizes=\"auto, (max-width: 475px) 100vw, 475px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 class=\"page-subheading\">Histogram<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/histogram\/\">Histogram tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Histogram<\/strong> in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td colspan=\"2\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1.png\" rel=\"lightbox-34\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51058 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1-600x348.png\" alt=\"\" width=\"600\" height=\"348\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1-600x348.png 600w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1-768x445.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1-1080x626.png 1080w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1-1280x742.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1-48x28.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/10-1.png 1339w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Histogram you can change the appearance of the axis, gridlines, background and statistics panel.<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 47.9167%;\">\n<p><strong>1. Axis Ticks<\/strong>: Style the text along the x and y axes.<\/p>\n<ul>\n<li>Axis Ticks Font Family<\/li>\n<li>Axis Ticks Font Colour<\/li>\n<li>Axis Ticks Font Size<\/li>\n<li>Axis Ticks Font Weight<\/li>\n<li>Axis Ticks Text Case<\/li>\n<\/ul>\n<p><strong>2. Gridline<\/strong>: Style the vertical and horizontal lines on the canvas.<\/p>\n<ul>\n<li>Gridline Colour<\/li>\n<li>Gridline Thickness<\/li>\n<li>Gridline Style<\/li>\n<\/ul>\n<\/td>\n<td style=\"width: 51.9792%;\">\n<p><strong>3. Background<\/strong>: Set the background colour.<\/p>\n<ul>\n<li>Chart Background Colour<\/li>\n<\/ul>\n<p><strong>4. Statistics Panel<\/strong>: Style the text in the statistics panel.<\/p>\n<ul>\n<li>Font Family<\/li>\n<li>Font Colour<\/li>\n<li>Font Size<\/li>\n<li>Font Weight<\/li>\n<li>Text Case<\/li>\n<\/ul>\n<p class=\"intro-text\"><strong>\u00a0<\/strong><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis ticks<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-A.png\" rel=\"lightbox-35\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51066\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-A.png\" alt=\"\" width=\"200\" height=\"87\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-A.png 285w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-A-150x65.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-A-48x21.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-B-3.png\" rel=\"lightbox-36\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51086\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-B-3.png\" alt=\"\" width=\"450\" height=\"191\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-B-3.png 516w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-B-3-150x64.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-B-3-48x20.png 48w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the gridlines<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-D-1.png\" rel=\"lightbox-37\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51073\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-D-1.png\" alt=\"\" width=\"200\" height=\"75\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-D-1.png 203w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-D-1-150x56.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-D-1-48x18.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-C-1.png\" rel=\"lightbox-38\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51085\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-C-1-600x164.png\" alt=\"\" width=\"450\" height=\"123\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-C-1-600x164.png 600w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-C-1-768x210.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-C-1-150x41.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-C-1-48x13.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-C-1.png 791w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the background<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F.png\" rel=\"lightbox-39\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51077\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F-600x350.png\" alt=\"\" width=\"200\" height=\"117\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F-600x350.png 600w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F-768x448.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F-150x87.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F-1080x630.png 1080w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F-1280x746.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F-48x28.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-F.png 1302w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-E-1.png\" rel=\"lightbox-40\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51084\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-E-1.png\" alt=\"\" width=\"450\" height=\"60\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-E-1.png 519w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-E-1-150x20.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-E-1-48x6.png 48w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the statistics panel<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-G.png\" rel=\"lightbox-41\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51080\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-G.png\" alt=\"\" width=\"200\" height=\"99\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-G.png 176w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-G-150x74.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-G-48x24.png 48w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-H-1.png\" rel=\"lightbox-42\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-51083\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-H-1.png\" alt=\"\" width=\"450\" height=\"179\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-H-1.png 524w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-H-1-150x60.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2021\/07\/Histogram-H-1-48x19.png 48w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2 class=\"page-subheading\">Performance Curve<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/performance-curve\/\">Performance Curve tutorial<\/a>, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Performance Curve<\/strong><b> <\/b>in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview.png\" rel=\"lightbox-43\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26378\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview.png\" alt=\"\" width=\"506\" height=\"477\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview.png 506w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview-150x141.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-overview-48x45.png 48w\" sizes=\"auto, (max-width: 506px) 100vw, 506px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Performance Curve\u00a0you can change the colour of the dots\u00a0indicating the actual data points, and the highlight colour.<\/p>\n<p><strong>1. Axis Ticks<\/strong>: Set the style of the label text.<\/p>\n<ul>\n<li>Axis Ticks Font Family<\/li>\n<li>Axis Ticks Font Colour<\/li>\n<li>Axis Ticks Font Size<\/li>\n<li>Axis Ticks Font Weight<\/li>\n<li>Axis Ticks Text Case<\/li>\n<\/ul>\n<p><strong>2. Gridline<\/strong>: Style the vertical and horizontal grid lines.<\/p>\n<ul>\n<li>Gridline Colour<\/li>\n<li>Gridline Thickness<\/li>\n<li>Gridline Style<\/li>\n<\/ul>\n<p><strong>3. Line Series<\/strong>: Set the style of the curve lines.<\/p>\n<ul>\n<li>Line Series Opacity<\/li>\n<li>Line Series Thickness<\/li>\n<li>Line Series Style<\/li>\n<\/ul>\n<p><strong>4. Dot Series<\/strong>: Style the dots\u00a0indicating the data values.<\/p>\n<ul>\n<li>Dot Series Opacity<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the axis text style<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis.png\" rel=\"lightbox-44\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26376\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis.png\" alt=\"\" width=\"198\" height=\"96\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis.png 198w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-150x73.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-48x23.png 48w\" sizes=\"auto, (max-width: 198px) 100vw, 198px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks.png\" rel=\"lightbox-45\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26377\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks.png\" alt=\"\" width=\"460\" height=\"207\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks.png 460w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-axis-ticks-48x22.png 48w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the style of the gridlines<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid.png\" rel=\"lightbox-46\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26379\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid.png\" alt=\"\" width=\"160\" height=\"77\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid.png 160w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-150x72.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-48x23.png 48w\" sizes=\"auto, (max-width: 160px) 100vw, 160px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines.png\" rel=\"lightbox-47\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26380\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines.png\" alt=\"\" width=\"463\" height=\"133\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines.png 463w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines-150x43.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-grid-lines-48x14.png 48w\" sizes=\"auto, (max-width: 463px) 100vw, 463px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the\u00a0style of the curves<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line.png\" rel=\"lightbox-48\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26381\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line.png\" alt=\"\" width=\"157\" height=\"70\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line.png 157w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-150x67.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-48x21.png 48w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series.png\" rel=\"lightbox-49\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26382\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series.png\" alt=\"\" width=\"458\" height=\"131\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series.png 458w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series-150x43.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-line-series-48x14.png 48w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the\u00a0style of the dots<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot.png\" rel=\"lightbox-50\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26383\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot.png\" alt=\"\" width=\"157\" height=\"71\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot.png 157w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-150x68.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-48x22.png 48w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series.png\" rel=\"lightbox-51\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-26384\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series.png\" alt=\"\" width=\"456\" height=\"57\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series.png 456w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series-150x19.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series-36x5.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/pcurve-style-dot-series-48x6.png 48w\" sizes=\"auto, (max-width: 456px) 100vw, 456px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<h2 class=\"page-subheading\">Treemap<\/h2>\n<p class=\"left-bar\">Related: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/treemap\/\">Treemap<\/a>\u00a0tutorial, <a title=\"How to Style a Component\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/#How_to_Style_a_Component\">Adding a new component style<\/a><\/p>\n<p class=\"intro-text\">The screenshot below shows the <strong>Treemap<\/strong>\u00a0in display mode.<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1.png\" rel=\"lightbox-52\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-20773 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1.png\" width=\"439\" height=\"440\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1.png 439w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-252x252.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-styles1-48x48.png 48w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><\/a><\/td>\n<td>\n<p class=\"intro-text\"><strong>What You Can Change<\/strong><\/p>\n<p>With the Treemap you can change the colours of the nodes, and the label text for the nodes.<\/p>\n<p><strong>1. Base Style<\/strong>: Set the style of the label text.<\/p>\n<ul>\n<li>Font Family<\/li>\n<li>Font Colour<\/li>\n<li>Font Size<\/li>\n<li>Font Weight<\/li>\n<li>Text Case<\/li>\n<\/ul>\n<p><strong>2. Interpolated Colours<\/strong>:\u00a0The colours of the nodes are determined by the interpolation between 2 colours - the Minimum Colour and Maximum Colour. As the value approaches the specified minimum value, the node colour more closely resembles the Minimum Colour, and as the value approaches the specified maximum value, the node colour more closely resembles the Maximum Colour.<\/p>\n<ul>\n<li>Minimum Colour<\/li>\n<li>Maximum Colour<\/li>\n<\/ul>\n<p><em>Tip: You will usually get a nicer looking treemap if your minimum and maximum colours are the same hue but different brightness (e.g. light blue and dark blue) or are next to each other on the colour wheel (e.g. red and yellow or green and blue). The values you specify for minimum and maximum will also affect how the colours are interpolated.<\/em><\/p>\n<p><strong>3. Set Colours<\/strong>:\u00a0\u00a0The colour of the node when the value is below the minimum value or above the maximum value.<\/p>\n<ul>\n<li>Below Minimum\u00a0Colour<\/li>\n<li>Above Maximum\u00a0Colour<\/li>\n<\/ul>\n<p><strong>4. Aggregate Colour<\/strong>: The colour of the node when two or more nodes have been combined.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"no-toc-heading\">Examples<\/p>\n<table style=\"border: 1px solid #cccccc;\">\n<tbody>\n<tr>\n<td style=\"padding-left: 5px;\" width=\"450\"><strong>Custom Style in Display Mode<\/strong><\/td>\n<td width=\"450\"><strong>Custom Style Properties<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Label Text<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style.png\" rel=\"lightbox-53\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20767\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style.png\" alt=\"treemap-font-style\" width=\"189\" height=\"142\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style.png 189w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style-150x113.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style-36x27.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-style-48x36.png 48w\" sizes=\"auto, (max-width: 189px) 100vw, 189px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\">\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop.png\" rel=\"lightbox-54\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20768\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop.png\" alt=\"treemap-font-prop\" width=\"413\" height=\"207\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop-150x75.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-font-prop-48x24.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Interpolated Minimum and Maximum\u00a0Colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style.png\" rel=\"lightbox-55\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20762\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style.png\" alt=\"treemap-interp-style\" width=\"172\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style.png 172w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-style-48x38.png 48w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop.png\" rel=\"lightbox-56\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20769\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop.png\" alt=\"treemap-interp-prop\" width=\"413\" height=\"102\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop-150x37.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-interp-prop-48x12.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Set Minimum and Maximum Colours<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style.png\" rel=\"lightbox-57\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20771\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style.png\" alt=\"treemap-minmax-style\" width=\"172\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style.png 172w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-minmax-style-48x38.png 48w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop.png\" rel=\"lightbox-58\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20770\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop.png\" alt=\"treemap-set-prop\" width=\"413\" height=\"96\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop-150x35.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-set-prop-48x11.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\" width=\"450\">\n<p><em><strong>EXAMPLE: Changing the Aggregate Colour<\/strong><\/em><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style.png\" rel=\"lightbox-59\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20766\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style.png\" alt=\"treemap-agg-style\" width=\"172\" height=\"135\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style.png 172w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style-150x118.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-style-48x38.png 48w\" sizes=\"auto, (max-width: 172px) 100vw, 172px\" \/><\/a><\/p>\n<\/td>\n<td width=\"450\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop.png\" rel=\"lightbox-60\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20772\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop.png\" alt=\"treemap-agg-prop\" width=\"413\" height=\"36\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop.png 413w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop-150x13.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop-24x2.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop-36x3.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/08\/treemap-agg-prop-48x4.png 48w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page lists the charting components in IFS OI Explorer and how they can be styled.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-admin\/explorer-styles\/styling-charts\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":18269,"parent":17346,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[1],"tags":[15,488],"class_list":["post-32902","page","type-page","status-publish","has-post-thumbnail","hentry","category-uncategorized","tag-charts-2","tag-styles","Version-4-5-4","Version-4-8","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=32902"}],"version-history":[{"count":6,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32902\/revisions"}],"predecessor-version":[{"id":67118,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/32902\/revisions\/67118"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/17346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/18269"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=32902"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=32902"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=32902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}