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.

Answer 1

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>