Izenda Logo

Basic Charts


Customizing the chart colors allows you to inject a bit of your own branding, or any other color scheme, into Izenda's reports.


This image depicts a pie chart with custom colors set to Blue, Red, Yellow and Green.

Pie chart with custom colors


The following code snippet should be added to the default.master page in a webforms implementation, or in Views/Shared/_SiteLayout.cshtml in an MVC implementation:

<script type="text/javascript">
  htmlChartColors = ['Blue', 'Red', 'Yellow', 'Green'];

This would achieve the color scheme from the example image above.

Note: you will need a recent copy of the Izenda core product. This ability was added in, and can be downloaded here


Visualizations use the D3 javascript library (http://d3js.org/), which means that to customize the colors used in a specific visualization you must modify that feature's base code. There is no global setting to change the colors used in a visualization, as each visualization has its own independent codebase.


Here, the Heatmap visualization has been customized to use two colors - red and green.

Custom Colors used in a visualization


Here we have customized the Color function in the base visualization definition, located by default at .\Resources\Vis\Rectangular\Heatmap\View.html

var items = vis.getItems(), sum = 0, avg = 0;
for (var i = 0; i < items.length; ++i) {
	sum += vis.unitValue(items[i], s.props.metric);
avg = sum / items.length;

function color(d) {
	// val - value of the current rectangle.
	var val = vis.unitValue(d, s.props.metric);

	return (val > avg) ? "#FF0000" : "#00FF00";

The basic steps involved here are:

  • Determine the value of each item
  • Establish an average of all values in the dataset,
  • Color each value red (#FF0000) if it is above the average, and green (#00FF00) if it is below.