Reply To: Custom Label on Xaxis

[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