How to shift labels in graph so that they appear on bottom of bars in bar graph?

Question

var chartByProduct = { "type":"hbar", "title": { "text": "TOP & BOTTOM 5 PRODUCTS BY CM", "text-align": "center", "font-family":"arial", "font-color": "#5b5b5b", "font-size": "18px", "padding": "25px", "background-color": "none" }, "plot": { "valueBox":{ "decimals": 2, "rules":[ { rule:"%v<0", placement:"out", text:"%v%", offsetX:"-25px", }, { rule:"%v>0", placement:"out", text:"%v%", offsetX: "25px" }, ]

                                  },
                            },
                    "plotarea":{
                        "adjustLayout":true,
                        "marginLeft":"30%",
                        "marginRight":"30%",
                        "marginBottom":"15%",
                        "marginTop": "15%",
                    },
                    "scale-x":{
                        "offset-end":"50%",
                        "offset-x":"50%",
                        alpha:1,
                        tick:{alpha:0},
                        "label":{
                            "text":"Bottom 5 products by sales"
                            },
                        "labels":[negative_product_name[0],negative_product_name[1],negative_product_name[2],negative_product_name[3],negative_product_name[4]],
                    },
                    "scale-x-2":{
                        "offset-start":"50%",
                        alpha:0,
                        tick:{alpha:0},
                        "label":{
                            "text":"Top 5 products by sales"
                            },
                        "labels":[positive_product_name[0],positive_product_name[1],positive_product_name[2],positive_product_name[3],positive_product_name[4]],
                    },
                    "scale-y":{
                        "alpha":1.0,
                        },
                    "scale-y-2":{
                        "alpha":1.0,
                        },
                    "series":[
                           {
                            "values":negative_cm_excluding_no_ev_percent,
                            "decimals":2,
                            "scales":"scale-x,scale-y",
                            "data-custom-token" : negative_cm_excluding_no_ev,
                            "tooltip":{
                                "text":'%data-custom-token',
                                },
                            "rules":[
                                  { 
                                   rule:"%v<0",
                                   "background-color":"#fd625e"
                                   },
                                   {
                                    rule:"%v>0",
                                    "background-color":"#68d7c6"
                                   },
                                ],
                        },
                        {
                            "values":positive_cm_excluding_no_ev_percent,
                            "decimals":2,
                            "scales":"scale-x-2,scale-y",
                            "data-custom-token" : positive_cm_excluding_no_ev,
                            "tooltip":{
                                "text":'%data-custom-token',
                                },
                            "rules":[
                                  { 
                                    rule:"%v<0",
                                    "background-color":"#fd625e"
                                   },
                                   {
                                     rule:"%v>0",
                                     "background-color":"#68d7c6"
                                   },
                                    ],
                        },
                    ]
        };
zingchart.render({
    id: 'productBarChart',
    data: chartByProduct,
    hideprogresslogo: true,
    height: "100%",
    width: "100%"
});

Here the labels in this config are coming above the bars where as i want these labels below them. How could i do so? What are the properties i could use to shift labels on scale of the graph. Can i make changes in this configuration or should i use mixed chart or maybe 2 different charts? Please help.

score 4 · Accepted Answer · answered Sep 23 '16 at 17:20

Full Disclosure, I'm a member of the ZingChart team.

var myConfig = 
 {  
    "type":"hbar",
    "title":{  
       "text":"TOP & BOTTOM 5 PRODUCTS BY CM",
       "text-align":"center",
       "font-family":"arial",
       "font-color":"#5b5b5b",
       "font-size":"18px",
       "padding":"25px",
       "background-color":"none",
       "adjustLayout":true
    },
    "plotarea":{  
       "adjustLayout":true,
       "margin":'dynamic'
    },
    "plot":{
      "valueBox":{
        "fontColor":"#000"
      },
      "stacked":true
    },
    "scale-x":{  
       "offset-end":"55%",
       "offset-x":"50%",
       "alpha":1,
       "tick":{  
          "alpha":0
       },
       "label":{  
          "text":"Bottom 5 products by sales"
       }
    },
    "scale-x-2":{  
       "offset-start":"55%",
       "alpha":0,
       "tick":{  
          "alpha":0
       },
       "label":{  
          "text":"Top 5 products by sales"
       },    
    },
    "scale-y":{ },
    "scale-y-2":{ },
    "series":[  
       {  
          "values":[-5,-4,-6,-7,-1],
          "decimals":2,
          "stack":1,
          "scales":"scale-x,scale-y",
          'data-custom-token': ['Videocon 1.5 Ton Star Split', 'Samsung Galaxy s6 Edge','Voltas 155CY 1.2 Ton 5 Star Air SPlit Conditioner','Google Nexus', 'Gitanjali 100 Gm 24Kt 995 Bis Hallmarked Purity Plain Gold Bar'],
          "valueBox":{  
             "text":'%data-custom-token',
             "placement":'bottom'
          },
          "background-color":"#fd625e"
       },
       {  
          "values":[0,0,0,0,0],
          "decimals":2,
          stack:1,
          "scales":"scale-x,scale-y",
           'data-custom-token':[-5,-4,-6,-7,-1],
          "valueBox":{  
             "text":'%data-custom-token',
             "placement":'bottom',
          },
          "background-color":"#fd625e"
       },
       {  
          "values":[0,0,0,0,0],
          "decimals":2,
          "stack":2,
          'data-custom-token':[5,4,6,7,1],
           "scales":"scale-x-2,scale-y",
          "valueBox":{  
             "text":'%data-custom-token',
             "placement":'bottom-in'
          },
           "background-color":"#68d7c6"

       },
       {  
          "values":[5,4,6,7,1],
          "decimals":2,
          "stack":2,
          "scales":"scale-x-2,scale-y",
          'data-custom-token':['Insect And Mosquito Killer with NIght Lamp','Lenovo K3 Note 16GB', 'LED Projection Clock', 'Nokia 225 (black)', 'Nokia 225'],
          "valueBox":{  
             "text":'%data-custom-token',
             "placement":'bottom-out'
          },
          "background-color":"#68d7c6"
       },
    ]
 };

zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: 500, 
 width: '99%' 
});

<!DOCTYPE html>
<html>
 <head>
 <!--Assets will be injected here on compile. Use the assets button above-->
  <script src= 'https://cdn.zingchart.com/2.4.0/zingchart.min.js'></script>
  <script> ZC.MODULESDIR = 'https://cdn.zingchart.com/2.4.0/modules/';
</script>
 <!--Inject End-->
 </head>
 <body>
  <div id='myChart'></div>
 </body>
</html>

The idea behind this was to create another series. Stack that series and show another valueBox in there. The ordering of the series does matter for stacking and displaying the valueBox.

Another alternative is to use labels and calculate the height of each bar and place the label at the end of the bar using offsetX. This involves direct SVG manipulation, but it is very possible.

var labelName = ['Apple','Microsoft','Samsung', 'Sony', 'LG', 'Motorola', 'Nokia', 'HTC'];
 
function createLabel(text, nodeWidth, yh) {
  var clientWidth = document.getElementById('myChart').clientWidth;
  var labelWidth = nodeWidth ? clientWidth - nodeWidth : clientWidth;
  
  return {
    "text": text,
    "font-size": "18px",
    "font-family": "arial",
    "font-weight": "normal",
    "font-color": "#000000",
    "textAlign":"left",
    "borderBottom" : "3px dotted black",
    "border-spacing": 5,
    "width" : labelWidth,
    "x":0,
    "y": 25 + yh, // Fixed height, will adjust offsetBased on Height
    "shadow": false
  }
}
 
var myConfig = {
  type: "hbar",
  scaleY: {
    mirrored: true,
    values:"0:150:10", //scale the bars down
    visible:false
  },
  scaleX: {
    visible:false
  },
  plotarea: {
    margin:0,
    padding:0
  },
 series : [
  {
    valueBox: {
      text: "%pper",
      decimals: 3,
      fontSize: "18px",
      fontColor: "#FFFFFF",
      placement: "node: top",
      paddingLeft: "75px"
    },
   values : [35,42,67,89,25,34,67,85],
   backgroundColor : "#4CB8C4 #3CD3AD",
   // Cannont have borderRadius with it,
  }
 ]
};
 
zingchart.load = function(p) {
  // Data to update the chart
  var json = {};
  json.labels = [];
  var padding = 20;
  
  // Get the plot container from svg
  var plotPath = document.getElementById("myChart-graph-id0-plot-0-bl-1-c");
 
  // Get the svg plots from the container
  var plots = plotPath.getElementsByTagName("path");
  
  // Loop through and create labels
  for(var i = 0; i < plots.length; i++) {
 
    // Get the path attribute from d matching this. Minimal amount of info to get x1 x2 and y1
    var xyCords = plots[i].getAttribute("d").match(/M{1} [0-9]{1,4} [0-9]{1,4} L [0-9]{1,4}/)
    
    // Split after the M, grab the first numbers encountered, grab that value
    var x1  = xyCords[0].split('M ')[1].match(/[0-9]{1,4}/)[0];
    
    // Get y cordinate for position line up and down
    var y1 = xyCords[0].split('M ')[1].match(/[0-9]{1,4} [0-9]{1,4}/)[0].split(' ')[1];
 
    // Split after the L, grab the first numbers and we have our starting point
    var x2  = xyCords[0].split('L ')[1];
 
    // Create new labels
    // padding is offset for border size and labe fontSize
    json.labels.push(createLabel(labelName[i], (x2-x1 + padding), parseInt(y1) - padding));
  }
 
  // Update the chart to the new labels
  zingchart.exec('myChart', 'modify', {
    graphid: 0,
    plotid: 0,
    data: json
  });
  
}
 
zingchart.render({ 
 id : 'myChart', 
 data : myConfig, 
 height: "100%", 
 width: "100%", //Meant for 100% width charts
});

<!DOCTYPE html>
<html>
 <head>
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
  <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
  ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head>
 <body>
  <div id='myChart'></div>
 </body>
</html>

How to shift labels in graph so that they appear on bottom of bars in bar graph?

1 Answers1