Hi Martin, thanks for the reply.

I've just suggested the product idea although at this point of maturity of the product I think this kind of things are closer to an issue rather than just a suggestion.

Anyways, I'd also very much appreciate your help with another thing related to chart's legend. I have a stacked-bar chart like so:

The legend I want to show is regarding each fragment on the bars (i.e., each color). But I want to show not only the fragment name but also a value for that fragment in the whole graph. I cannot seem to find how can I customize the legend's content. How can I do this?

Thanks

Hello Hugo, actually, this template should work for you. Note that you were close in your simple approach but instead of using square brackets [] after an item object, you should have used just a dot, e.g.

    <div> ${series.valueMemberPath}: ${item.${series.valueMemberPath}}</div>

Hi Martin.

Unfortunately, that didn't work as expected. Here it is its result:

It wouldn't be easy for me to share the data and source code because it's being generated in a way more complex scenario. If you really need it I can try and create a simplified example although I believe the issue is isolated enough.

Please let me know how we should continue.

Thanks,

Yes, please provides us with a simplified example to isolate this issue and we will try to create a solution for it.

Martin,

I'm pretty sure there is no need for this as the issue with the tooltip seems pretty clear by itself. However I have created this simplified version of my code.

<div class="chart" id="chart"></div>
<div class="chart-legend chart-legend-horizontal" id="chartLegend"></div>
<script type="text/x-jquery-tmpl" id="template">
    <div>${series.valueMemberPath}: ${item.${series.valueMemberPath}}</div>
</script>
<script type="text/javascript">

	function linqSelect(arr, fnSelect) {
        var newArr = [];
        for (var i = 0; i < arr.length; i++) {
            newArr.push(fnSelect(arr[i]));
        }
        return newArr;
    };

    let dataSource = [{"DiaSemana":"Martes","ENF4":0,"ENFE":5,"ADAVI":1,"CAP":4},{"DiaSemana":"Lunes","ENF4":0,"ENFE":7,"ADAVI":1,"CAP":8},{"DiaSemana":"Domingo","ENF4":0,"ENFE":7,"ADAVI":1,"CAP":8},{"DiaSemana":"Sábado","ENF4":0,"ENFE":5,"ADAVI":1,"CAP":7},{"DiaSemana":"Viernes","ENF4":0,"ENFE":2,"ADAVI":1,"CAP":1},{"DiaSemana":"Jueves","ENF4":0,"ENFE":7,"ADAVI":1,"CAP":6},{"DiaSemana":"Miércoles","ENF4":0,"ENFE":3,"ADAVI":1,"CAP":4}];

    let xAxis = { name: "xAxis", type: "numericX" },
        yAxis = { name: "yAxis", type: "categoryY", label: "DiaSemana", gap: 0.5, },
        ausencias = [],
        totales = {};

        for (i = 0; i < dataSource.length; i++) {
            for (var key in dataSource[i]) {
                if (key == "DiaSemana")
                    continue;
                if (i == 0) {
                    ausencias.push(key);
                    totales[key] = 0;
                }
                totales[key] += dataSource[i][key];
            }
        }

        $("#chart").igDataChart({
            dataSource: dataSource,
            height: 300,
            width: "100%",
            title: "Chart Title",
            axes: [xAxis, yAxis],
            legend: { element: "chartLegend" },
            series: [
                {
                    name: "series",
                    type: "stackedBar",
                    xAxis: xAxis.name,
                    yAxis: yAxis.name,
                    outline: "transparent",
                    isTransitionInEnabled: true,
                    series: linqSelect(ausencias, function (a) {
                        return {
                            name: a + "Fragment",
                            valueMemberPath: a,
                            type: "stackedFragment",
                            showTooltip: true,
                            tooltipTemplate: "template",
                            legendItemVisibility: "visible",
                            title: a + " " + totales[a]
                        };
                    })
                }
            ]
        });
</script>

I modified tooltip template in my sample and I added tooltipShowing function on the DataChart to store value of an item for a given series.valueMemberPath as  item.tooltipValue property:

<!DOCTYPE html>
<html>

<head>
    <title>DC Stacked Series + Tooltip</title>
    <!-- Ignite UI Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2020.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2020.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <!--CSS file specific for chart styling -->
    <link href="http://cdn-na.infragistics.com/igniteui/2020.2/latest/css/structure/modules/infragistics.ui.chart.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>
    
     <!-- <script type='text/javascript' src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>  -->
     
    <!-- Ignite UI Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2020.2/latest/js/infragistics.dv.js"></script>
</head>

<body>
    <div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
        <div id="chart"></div>
        <div id="legend"></div>
    </div>

    <!-- Custom Tooltip Template -->
    <script id="tooltipTemplate" type="text/x-jquery-tmpl">
       <div>
         <div>Data Name: ${item.Year}</div>
          <div>Column Name: ${series.valueMemberPath} </div>
          <!-- note that tooltipValue is added in the tooltipShowing function -->
          <div>Column Value: ${item.tooltipValue} </div> 
                        
          <!-- note this syntax is not supported:  -->
          <!-- <div>Column Value: ${item.${series.valueMemberPath}}  </div> -->
        </div>
    </script>

    <script type="text/javascript">
       
        $(function () {

         var dataItems = getDataSource();
         var dataColumns = [];
         var dataTotals = {};
         for (i = 0; i < dataItems.length; i++) {
            for (var key in dataItems[i]) {
                if (key == "Year") continue;
                
                if (i == 0) {
                    dataColumns.push(key);
                    dataTotals[key] = 0;
                }
                dataTotals[key] += dataItems[i][key];
            }
        }
 
         $("#chart").igDataChart({
            height: "300px",
            width: "100%",
            horizontalZoomable: true,
            verticalZoomable: true,
            windowResponse: "immediate",
            title: "Stacked Bar Chart",
            legend: { element: "legend" },
            dataSource: dataItems,  
            
            // added this function to resolve displaying values in tooltip templates
            tooltipShowing: function (e, ui) {
                	var valueMemberPath = ui.series.valueMemberPath;
                  ui.item.tooltipValue = ui.item[valueMemberPath];
            },
            
            axes: [{
                name: "yAxis",
                type: "categoryY",
                label: "Year",
            }, {
                name: "xAxis",
                type: "numericX",
            }],
            series: [ CreateStackedSeries() ],
         });

         function CreateStackedSeries() {
            var series = {
                name: "stackedBarSeries",
                type: "stackedBar",
                xAxis: "xAxis",
                yAxis: "yAxis",
                showDefaultTooltip: true,
                series: CreateFragments(dataColumns)
            }
            return series;
        }

         function CreateFragments(dataColumns) {
            var fragments = [];
            for (i = 0; i < dataColumns.length; i++) {
                var key = dataColumns[i];
                console.log("CreateFragments " + key);
                var fragment = CreateStackedFragment(key);
                fragments.push(fragment); 
            }
            return fragments;
        }

         function CreateStackedFragment(memberPath) {
            var stackFragment = {
                name: memberPath + "Fragment",
                valueMemberPath: memberPath,
                type: "stackedFragment",
                showTooltip: true,
                title: memberPath + " (" + Math.round(dataTotals[memberPath]) + " Total)",
                tooltipTemplate: "tooltipTemplate"
            };
            
            return stackFragment;
        }

         function getDataSource(){
       
            var data = [
                {
                    "Year": 2005,
                    "Canada": 18.8932,
                    "Europe": 25.4401,
                    "Russia": 51.0796,
                    "America": 69.4437,
                    "China": 63.9524,
                },
                {
                    "Year": 2006,
                    "Canada": 19.2273,
                    "Europe": 24.6105,
                    "Russia": 52.0557,
                    "America": 70.7539,
                    "China": 68.2333,
                },
                {
                    "Year": 2007,
                    "Canada": 19.5439,
                    "Europe": 23.7326,
                    "Russia": 52.5599,
                    "America": 71.4000,
                    "China": 73.2809,
                },
            ];
            
            return data;
        }


        });
    </script>

</body>
</html>