Home forums Feature Requests & Feedback Label Position in the middle of a stacked bar

This topic contains 9 replies, has 2 voices, and was last updated by  jaybe 3 years, 3 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #5171

    jaybe
    Participant

    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 🙂

    #5172

    Sunil Urs
    Keymaster

    Please make sure that you have set indexLabelPlacement property to “inside” in both the series. In case you could not get it to work, please create a fiddle so that I can figure out the problem.

    Here is a fiddle that I just created.

    http://jsfiddle.net/canvasjs/hbLRr/

    • This reply was modified 3 years, 3 months ago by  Sunil Urs.
    #5174

    jaybe
    Participant

    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 ?

    #5175

    jaybe
    Participant

    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>
    
    #5176

    Sunil Urs
    Keymaster

    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

    #5177

    jaybe
    Participant

    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.

    #5178

    Sunil Urs
    Keymaster

    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.

    #5180

    jaybe
    Participant

    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 ?

    #5189

    Sunil Urs
    Keymaster

    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.

    #5191

    jaybe
    Participant

    Thank you very much for your work 🙂

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.