JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
axisY: {
gridThickness: 0
},
axisX: {
labelFormatter: function(e) {
return " ";
},
tickThickness: 0,
stripLines: [
{
value: 33,
color: "transparent",
label: 2,
labelPlacement: "outside",
labelFontColor: "black",
labelBackgroundColor: "transparent"
},
{
value: 35,
color: "blue"
},
{
value: 37,
color: "transparent",
label: 3,
labelPlacement: "outside",
labelFontColor: "black",
labelBackgroundColor: "transparent"
},
{
value: 63,
color: "transparent",
label: 2,
labelPlacement: "outside",
labelFontColor: "black",
labelBackgroundColor: "transparent"
},
{
value: 65,
color: "blue"
},
{
value: 67,
color: "transparent",
label: 2,
labelPlacement: "outside",
labelFontColor: "black",
labelBackgroundColor: "transparent"
},
]
},
data: [{
type: "spline",
markerSize: 0,
color: "red",
dataPoints: [
{ x: 10, y: 14 },
{ x: 20, y: 11},
{ x: 30, y: 39 }
]
},
{
type: "spline",
markerSize: 0,
color: "red",
dataPoints: [
{ x: 10, y: 39 },
{ x: 20, y: 55},
{ x: 30, y: 50 }
]
},
{
type: "spline",
markerSize: 0,
color: "red",
dataPoints: [
{ x: 40, y: 39 },
{ x: 50, y: 55},
{ x: 60, y: 40 }
]
},
{
type: "spline",
markerSize: 0,
color: "red",
dataPoints: [
{ x: 40, y: 32 },
{ x: 47, y: 15},
{ x: 55, y: 23 }
]
},
{
type: "spline",
markerSize: 0,
color: "red",
dataPoints: [
{ x: 70, y: 11 },
{ x: 80, y: 29},
{ x: 90, y: 60 }
]
},
{
type: "spline",
markerSize: 0,
color: "red",
dataPoints: [
{ x: 70, y: 21 },
{ x: 80, y: 39},
{ x: 90, y: 70 }
]
...