Custom Label on Xaxis

[anindita5151]

I want to print “>20” in the label of X-axis I have the data set containing the strings like
1.40%
16.09%
>20%

etc. dynamically getting fetched from HTML <table>.

I tried labelFormatter,label etc.from canvas js and also decoded gt; to >
it is printing correctly while putting the string in console.log
but when the same string is kept within label: for X-axis, then “>20% ” is not printed.

Please help me.
I am keeping on trying my best with it and have urgent client demo tomorrow please help me.

[Vishwas R]

@anindita5151,

Showing ‘>’ within label seems to be working fine. Can you kindly create JSFiddle reproducing the issue you are facing and share it with us so that we can look into the code, understand the scenario better and help you resolve?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a JSFiddle helps us in figuring out the issue and many a time we can just edit your code on JSFiddle to fix the issue right away.

—
Vishwas R
Team CanvasJS

[anindita5151]

http://jsfiddle.net/anindita5151/r3162x8L/2/

[Vishwas R]

@anindita5151,

Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS

[anindita5151]

Thanks a lot. It is working fine.
Yet having another problem to create a graph having multiple subdivisions within it, looking for it for a long time in canva js site and Google but in vain.
I tried with Striplines, Label, Index label properties but they are not working.

Can you please suggest me?

Following is the part of my code related to the specific chart

CODE:
`
function fd(drpMktlst) {
if (drpMktlst) {
var dataPointsDrp30 = [];
var myTableDrp30 = document.getElementById(‘drp30tb’);
var end = []
var tmp=[]
var st=[]
st.push(0)
var array =[]
var points=[]
for (i = 1; i < myTableDrp30.rows.length; i++){//loops through rows
var cellsDrp30 = myTableDrp30.rows.item(i).cells;//loop through each column or cell in each row
var dataPointDrp30 = { label: String(cellsDrp30.item(0).innerHTML), y: Number((cellsDrp30.item(1).innerHTML).replace(“%”,””))};
dataPointsDrp30.push(dataPointDrp30);
array.push(String(cellsDrp30.item(2).innerHTML))
}
console.log(“array =”+array)
console.log(“array =”+array.length)
for (var x = 0; x < (array.length); x++)
{ if(array[x] !== array[x+1])
{
end.push(x)
}
}
console.log(“Ends at =”+end);
for (var p = 0; p < (end.length-1); p++)
{
st.push(end[p]+1)
}
console.log(“Starts at =”+st)

var lenStr = st.length+end.length
console.log(“lenStr = ” +lenStr)
var finalArr =[]

for (var y = 0; y < lenStr; y++)
{

if(y%2==0)
{
for(var s=0;s<st.length;s++)
{
if(!finalArr.includes(st[s]))
finalArr.push(st[s])
}
}
else if(y%2!=0)
{
for(var e=0;e<end.length;e++)
{
if(!finalArr.includes(end[e]))
finalArr.push(end[e])
}
}
}

function sortI(a, b) {
return a > b ? 1 : b > a ? -1 : 0;
}

finalArr.sort(sortI);

console.log(“finalArr = “+ finalArr)

//if(array.inclu)

var thrdget =”<%=thrdget%>”;

var chartDrp30 = new CanvasJS.Chart(“chartContainerDrp30”,
{
title: {
text: “VoLTE Drops”,fontFamily: “Arial,Helvetica,sans-serif”,fontSize: 10,fontWeight: “bold”
},

axisY:{
title:”% Of Subscribers”,titleFontFamily: “Arial,Helvetica,sans-serif”,fontSize: 10, minimum: 0, interval:8,valueFormatString:”# ‘%'”,
gridThickness: 0, stripLines: [{ value: thrdget, showOnTop: true,label: “Threshold = “+thrdget,labelFontFamily:”Arial,Helvetica,sans-serif”,
labelFontColor:”Red”, labelPlacement:”inside”,labelAlign: “center”,labelFontStyle:”bold”, labelFontSize:12 }]
},
axisX:{
title: “Market”,titleFontFamily: “Arial,Helvetica,sans-serif”,fontSize: 10,minimum: 0.0 ,
interval: 1,labelAngle: -90,labelMaxWidth: 100,labelWrap: true//,
/* stripLines:[
{
startValue:finalArr[0],
endValue:finalArr[1]+1,
color:”#e6e6d8″,label:””
},
{
startValue:finalArr[2]+1,
endValue:finalArr[3]+1,
color:”#e6e6d8″,
}
] */
},
width:1190,dataPointWidth: 10,
data: [{
type: “column”,
color: “#91caf9”,
//xValueType: “String”,
dataPoints: dataPointsDrp30
}]
});
chartDrp30.render();
}
}

the image that I want to make look a like is ::
https://drive.google.com/file/d/1ERjQDCDqWYBnLGmEe34dfxkSGe7HLpkZ/view?usp=sharing

[Vishwas R]

@anindita5151,

It’s not possible to have a separator below axisX as of now. However you can work-around this by adding stripLines and labels to it as shown in this JSFiddle.

—
Vishwas R
Team CanvasJS

[anindita5151]

Thank you.
I tried with Striplines as you have provided in this JSFiddle but striplines are not hardcoded for my case.
They are coming from some array and I want to put them accordingly by traversing a for loop against that array.
Pleas let me know how to add striplines following array like this:

axisX: {
labelAngle: -90,
stripLines: [
for(i=0; i<st.length; i++){value: st[i]}
so that it can take the values as following:
{
value: st[0]
},
{
value: st[1]
}, … and so on… ,{value: st[n]]
},

Please help me…Thanks in Advance!

[Vishwas R]

@anindita5151,

Can you kindly create JSFiddle and share it with us so that we can look into the code, understand the scenario better and help you resole?

From what we have observed, sometimes things get delayed mostly when we are not able to reproduce the issue or not able to understand the exact requirements or the solution that we provide may not work properly due to the variation in chart-options being used by you and us.

Having a JSFiddle helps us in figuring out the issue and many a time we can just edit your code on JSFiddle to fix the issue right away.

—
Vishwas R
Team CanvasJS

[anindita5151]

Hello,

Please find the updated JS Fiddle accordingly.

http://jsfiddle.net/anindita5151/r3162x8L/14/

I must insert Striplines on the position of X-values fetched from st array , they are not hard-coded suggested for Chart division.
Please find the code snippet below:
var st=[]
var chart = new CanvasJS.Chart(“chartContainer”,{
axisX: {
labelAngle: -90,
stripLines: [{
value: st[0],showOnTop: true,
}, {
value:st[1], showOnTop: true,
} , … and so on… ,{value: st[n]}
]
},

Please suggest me.

[Vishwas R]

@anindita5151,

Parsing stripLines values just like the way you are parsing dataPoints should work fine in your case. Please take a look at this updated JSFiddle.

—
Vishwas R
Team CanvasJS