Label Position in the middle of a stacked bar

[jaybe]

Hi
I want to show the value if a stacked bar in the middle of every single bar. I only have two values. i want to have it like this.
|———-|————-|
|—–2—-|——4——|
|———-|————-|
But when i want to show the values on both (inside) it shows the following:
|———-|————-|
|———2|————-|
|———-|————-|
There is missing one value. So it is possible to get both labels in the middle of every bar ?
Thank you very much for this awesome lib :)

[Sunil Urs]

@jaybe,

Please make sure that you have set indexLabelPlacement property to “inside” in both the series.

Kindly take a look at the code-snippet below,

data: [
      {
        indexLabel: "{y}",
        indexLabelFontColor:"white",
        indexLabelPlacement:"inside",
        type: "stackedBar",
        dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 48 },
        { x: 80, y: 34 },
        { x: 90, y: 44}
        ]
      },
      {
        indexLabel: "{y}",
        indexLabelFontColor:"white",
        indexLabelPlacement:"inside",
        type: "stackedBar",
        dataPoints: [
        { x: 10, y: 41 },
        { x: 20, y: 55},
        { x: 30, y: 40 },
        { x: 40, y: 65 },
        { x: 50, y: 55 },
        { x: 60, y: 48 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 34}
        ]
      }
      ] 

Please take a look at this JSFiddle for an example on stackedBar chart with indexLabels placed inside.

• This reply was modified 10 years, 7 months ago by Sunil Urs.

[jaybe]

The Problem only exists when both values are the same (e.g. “2”). If they are different it works.

My second question: Can i show them in the middle of the bar and not on the right side ?

[jaybe]

And another question: How could i display more than one chart on one site. I tried:

<div id="chart1" style="height: 100px; width: 300px;">  </div>
<div id="chart2" style="height: 100px; width: 300px;">  </div>

That is my Code. But it only shows the last div :( (only one chart)

<script type="text/javascript">
	//Chart fuer Tore Start
  window.onload = function () {
    var chart = new CanvasJS.Chart("chart_tore",
    {
	creditText: "",
	axisY:{
lineThickness:0,
tickThickness:0,
valueFormatString:" ",//space
gridThickness:0,

},
axisX:{
lineThickness:0,
tickThickness:0,
valueFormatString:" ",//space
labelFontSize:0,
},
      title:{
        //text: "Tore und dies unddas",
		fontSize:20,
		verticalAlign: "center", 
        horizontalAlign: "left",
			
      },
	  toolTip: {
	  enabled:false,
	  },
      data:[
      {
	    indexLabel: "{y}",
		indexLabelFontSize: 20,
		indexLabelPlacement: "inside",
		color: "#151515",
        type: "stackedBar100",
        dataPoints: [
		{y: bartore_home, label: "Tore" },
		
        
        ]
      },       
      {
        indexLabel: "{y}",
		indexLabelFontSize: 20,
		indexLabelPlacement: "inside",
		color: "#F2F2F2",  
		type: "stackedBar100",
        dataPoints: [
        {y: bartore_away, label: "Tore" },
        
        ]
      },
	  
	  
	  

      ]

    });

chart.render();
}
//Chart fuer Tore Ende

//Chart fuer Gelb Start
  window.onload = function () {
    var chart = new CanvasJS.Chart("chart_gelb",
    {
	creditText: "",
	axisY:{
lineThickness:0,
tickThickness:0,
valueFormatString:" ",//space
gridThickness:0,

},
axisX:{
lineThickness:0,
tickThickness:0,
valueFormatString:" ",//space
labelFontSize:0,
},
      title:{
        //text: "Tore und dies unddas",
		fontSize:20,
		verticalAlign: "center", 
        horizontalAlign: "left",
			
      },
	  toolTip: {
	  enabled:false,
	  },
      data:[
      {
	    indexLabel: "{y}",
		indexLabelFontSize: 20,
		indexLabelPlacement: "inside",
		color: "#151515",
        type: "stackedBar100",
        dataPoints: [
		{y: bargelb_home, label: "Tore" },
		
        
        ]
      },       
      {
        indexLabel: "{y}",
		indexLabelFontSize: 20,
		indexLabelPlacement: "inside",
		color: "#F2F2F2",  
		type: "stackedBar100",
        dataPoints: [
        {y: bargelb_away, label: "Tore" },
        
        ]
      },
	  
	  
	  

      ]

    });

chart.render();
}
//Chart fuer Gelb Ende
</script>

[Sunil Urs]

Sorry, am not able to reproduce the issue. I just tried with all same values (including 2s) and its working fine. here it is http://jsfiddle.net/hbLRr/5/

Can you please create a fiddle so that I can see it and figure out the issue.

In order to render more than one chart, place all of them inside a single window.onload event handler. window.onload can only have one event handler attached this way. Hence second one is replacing the first one in your case. Or you can simply use jQuery’s $(document).ready() method instead of window.onload

[jaybe]

Here is my Fiddle: http://jsfiddle.net/jaybe/Dd66M/
There both value are working. But on my local html version it does not work. It only shows the first value when both values are the same. Hmmm.
I thought it was because i dont have my div width to 100%. But this also dont work here on my version.

PS: The thing with more charts is working now :) Thanks.

[Sunil Urs]

Can you try downloading the latest version of CanvasJS and see if it works? I don’t remember this bug in any of the previous versions though.

[jaybe]

no changes after new download.but i found something interresting by chaning the browser width with my mouse while having the div width set on 100%. in some browser width i see both values. so when i set my div width on 399px it works. but when i set them to 398px or 400px it dont work. you can test it on my fiddle. dont know why.

Is there a way to set the values in the middle of the bar ?
Can i disable the label if the value is null ?

[Sunil Urs]

[UPDATE]

This issue has been resolved. Please take a look at our blog page for more information on the bug fixes and updates.

Kindly take a look at the image below,

I can confirm the issue… This is an interesting one. I’ll get to it at the earliest… Thanks for reporting… :)

>> Is there a way to set the values in the middle of the bar ?
As of now there isn’t a way to display the same at the middle of the bar. But am considering this feature as of now. Can confirm within a week.

[jaybe]

Thank you very much for your work :)