Available in the Full Version
Funnel Chart - Styling
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Styled by CSS
Styled by Widget Options
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to change the look and feel of igFunnelChart control.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js" type="text/javascript"></script>
</head>
<body>
<link href="/css/charts/chart-samples.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
var data = [
{ Budget: 30, Department: "Administration" },
{ Budget: 50, Department: "Sales" },
{ Budget: 60, Department: "IT" },
{ Budget: 50, Department: "Marketing" },
{ Budget: 100, Department: "Development" },
{ Budget: 20, Department: "Support" }
];
$(function () {
// Create a regular funnel chart: It is styled according to the CSS in the infragistics.theme.css
// The styles are redefined later in the <style> node of the page
$("#chartCSS").igFunnelChart({
width: "100%",
height: "430px",
dataSource: data,
tooltipTemplate: "${Department}: ${Budget}",
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible"
});
// Create a funnel chart with brushes and outlines options set with specific colors
$("#chartOptions").igFunnelChart({
width: "100%",
height: "430px",
dataSource: data,
tooltipTemplate: "${Department}: ${Budget}",
outlineThickness: 3,
bottomEdgeWidth: 0.25,
outerLabelAlignment: "right",
brushes: ["#7DC3D9", "#3e5354", "#9EB5B4", "#5DD1C6", "#AFD1CE", "#2B768E"],
outlines: [ "#3189A6", "#212D2E", "#5C7877", "#2FA498", "#487D78", "#163F4B" ],
valueMemberPath: "Budget",
innerLabelMemberPath: "Budget",
innerLabelVisibility: "visible",
outerLabelMemberPath: "Department",
outerLabelVisibility: "visible"
});
});
</script>
<style type="text/css">
/* Redefine the styles from infragistics.theme.css that define fill and border colors for slices */
.customCss .ui-chart-palette-1 { border-color: #00AADE; background-color: #00AADE }
.customCss .ui-chart-palette-2 { border-color: #4B4B4D; background-color: #4B4B4D }
.customCss .ui-chart-palette-3 { border-color: #FCB025; background-color: #FCB025 }
.customCss .ui-chart-palette-4 { border-color: #EC6C2B; background-color: #EC6C2B }
.customCss .ui-chart-palette-5 { border-color: #36C0F3; background-color: #36C0F3 }
.customCss .ui-chart-palette-6 { border-color: #5B17A8; background-color: #5B17A8 }
.customCss .ui-funnel {
font-family: verdana;
font-weight: bold;
font-style: italic;
font-size: 12px;
color: #d00000;
}
.customCss .ui-funnel-slice { color: yellow; }
.customCss .ui-funnel-tooltip {
font-family: 'Courier New';
background: #e0e0f0;
border: 1px solid #8080e0;
font-size: 18px;
color: #8000a0;
}
</style>
<div class="sampleContent">
<div style="display: inline-block; height: 460px; width: 44%; z-index: 2; position: relative;" class="customCss">
<h4>Styled by CSS</h4>
<div id="chartCSS" style="border: none;"></div>
</div>
<div style="display: inline-block; height: 460px; width: 44%; margin-left: 1.5%;">
<h4>Styled by Widget Options</h4>
<div id="chartOptions" style="border: none;"></div>
</div>
</div>
</body>
</html>