igCategoryChart horizontal line

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>


<div id="chart" style="width:900px;height:400px"></div>

JavaScript

// Create a data array with some sample values
var data = [
  { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
  { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
  { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
  { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
  { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
];

// Create a chart and bind it to the data array
$("#chart").igCategoryChart({
    dataSource: data,
    // Set the chart type to column
    chartType: "column",
    xAxisGap: 0.1,
    yAxisMinimumValue: 0,
    yAxisMaximumValue: 1500,
    yAxisInterval: 250,
    yAxisLabel: "Population (in millions)",
    xAxisLabel: "Country",
    title: "Population per Country",
    subtitle: "(Projected population for 2025)",
    // Add a custom annotation layer to the chart
    customAnnotationLayer: {
        // Set the content of the annotation layer to be a function that returns an SVG element
        content: function (context) {
            // Get the chart width and height
            var width = context.width();
            var height = context.height();
            // Get the chart scale and offset
            var scale = context.scale();
            var offset = context.offset();
            // Get the value of the horizontal line to be the average population of all countries
            var value = data.reduce(function (sum, item) {
                return sum + item.Pop2025;
            }, 0) / data.length;
            // Calculate the y position of the horizontal line based on the value, scale, and offset
            var y = height - (value * scale.y() + offset.y());
            // Create an SVG namespace
            var svgns = "http://www.w3.org/2000/svg";
            // Create an SVG line element with the desired...