Strip lines - text position
Need to adjust the text position along with the arrow mark. Also, needs to reduce the strip line height.
by ElanchezhiyanP
November 19, 2022
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "StripLines Ymax and indexLabel position"
},
axisX: [{
stripLines: [{
value: 20,
color: "#b3db8f",
thickness: 2,
customLabel: "First Injection",
labelFontSize: 16,
labelFontWeight: "lighter"
},
{
value: 22,
color: "#b3db8f",
thickness: 2,
customLabel: "Second Injection",
labelFontSize: 16,
labelFontWeight: "lighter"
},
{
value: 24,
color: "#b3db8f",
thickness: 2,
customLabel: "Third Injection",
labelFontSize: 16,
labelFontWeight: "lighter"
},
{
value: 26,
color: "#b3db8f",
thickness: 2,
customLabel: "Last Injection",
labelFontSize: 16,
labelFontWeight: "lighter"
}]
}],
data: [{
type: "line",
dataPoints: [
{ x: 10, y: 710 },
{ x: 20, y: 550 },
{ x: 30, y: 500 },
{ x: 40, y: 650 },
{ x: 50, y: 950 },
{ x: 60, y: 680 },
{ x: 70, y: 280 },
{ x: 80, y: 340 },
{ x: 90, y: 140 }
]
}]
});
var dps = [];
for (var i = 0; i < chart.options.axisX[0].stripLines.length; i++) {
var stripLine = chart.options.axisX[0].stripLines[i];
dps.push({
x: stripLine.value,
y: 800,
indexLabel: stripLine.customLabel,
indexLabelWrap: false,
indexLabelFontWeight: "bold",
indexLabelFontSize: 12,
indexLabelMaxWidth: 150,
indexlabelAlign: "right",
indexLabelFontColor: stripLine.color,
});
}
chart.options.data.push({
type: "scatter",
markerSize: 0,
toolTipContent: null,
highlightEnabled: false,
...