How to move labels in a graph so that they appear at the bottom of columns in a histogram?

Question

var chartByProduct = {"Type": "HBAR", "title": {"text": "TOP and NO ONE 5 SM PRODUCTS", "text-align": "center", "Font Family": "Arial", " font-color ":" # 5b5b5b "," font-size ":" 18px "," padding ":" 25px "," background-color ":" none "}," plot ": {" ValueBox ": {" decimal places ": 2," rules ": [{rule:"% vol <0 ", Placement:" of ", text: "% v%", OffsetX: "- 25px",}, {Rule: "% v> 0", Placement: "from", 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 configuration go beyond where I want these labels to be lower. How can i do this? What properties can I use to shift labels on the graph scale. Can I make changes to this configuration or use a mixed chart or maybe 2 different graphs? Please, help.

Answer 1

Full disclosure, I am 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. Lay out this series and show another Box value. The order in which the series is ordered matters for the styling and display of the Box value.

Another option is to use labels and calculate the height of each bar and place the label at the end of the line using offsetX . This is due to the direct manipulation of SVG, 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>