Menu
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.
954
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
