Setting up the Shield UI JavaScript Chart Stacking mode property

Question

I am trying to set some stacking for my Shield UI JavaScipt Chart. I use the following code, that doesn’t seem to work:

$(function () {
    $("#chart").shieldChart({
        primaryHeader: {
            text: 'Shield UI Inversed Bar Chart Example',
            align: 'center'
        },
        isInverted: true,
        seriesSettings: {
            dataSeries: [
                {
                    seriesType: 'bar',
                    stackMode: "percent",
                    collectionAlias: 'Series A',
                    data: [12, 22, 25, 32, 33, 25]
                },
                {
                    seriesType: 'bar',
                    collectionAlias: 'Series B',
                    data: [22, 11, 22, 31, 32, 22]
                },
                {
                    seriesType: 'bar',
                    collectionAlias: 'Series C',
                    data: [20, 37, 11, 22, 25, 24]
                }
            ]
        });

});

I tried with stackMode: "normal", as well, but it didn’t solve the problem.

Answer 1

Here is your code with corrected syntax:

$(function () {
    $("#chart").shieldChart({
        primaryHeader: {
            text: 'Shield UI Inversed Bar Chart Example',
            align: 'center'
        },
        isInverted: true,
        seriesSettings: {
            dataSeries: [
                {
                    seriesType: 'bar',
                    stackMode: "percent",
                    collectionAlias: 'Series A',
                    data: [12, 22, 25, 32, 33, 25]
                },
                {
                    seriesType: 'bar',
                    collectionAlias: 'Series B',
                    data: [22, 11, 22, 31, 32, 22]
                },
                {
                    seriesType: 'bar',
                    collectionAlias: 'Series C',
                    data: [20, 37, 11, 22, 25, 24]
                }
            ]
        }
    });
});

Answer 2

The stackMode property is applicable for the whole chart e.g. all the series. It is not allowed to place it per series. Neither does it make any sense.

seriesSettings: {
bar: {
stackMode: "percent"
}
},

And here is the whole code you can test:

$(function() {
  $("#chart").shieldChart({  
primaryHeader: {
    text: 'Shield UI Inversed Bar Chart Example',
    align: 'center'
},
isInverted: true,
seriesSettings: {
bar: {
stackMode: "percent"
}
},    
dataSeries: [
  {
seriesType: 'bar',
collectionAlias: 'Series A',
data: [12,-522,25,32,33,25]
  }, 
  {
seriesType: 'bar',
collectionAlias: 'Series B',
data: [22,11,22,31,32,22]
  },
  {
seriesType: 'bar',
collectionAlias: 'Series C',
data: [20,37,11,22,25,24]
  }  
]
  });

  });