How to shift labels in graph so that they appear on bottom of bars in bar graph?
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.
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>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices