MultiSeries Chart with indexlabel, markers customization - CanvasJS JavaScript Charts
MultiSeries Chart with indexlabel, markers customization - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
JavaScript
var ToolTipHtml = "";
ToolTipHtml += "<div><b>{number}</b></div>";
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "SEStimate Planning Graph",
fontSize: 40,
fontColor: "#000",
horizontalAlign: "left"
},
axisX: {
title: "Age in Months",
interval: 1,
minimum: 35.5,
labelFontSize: 14,
labelFontColor: "#000",
titleFontColor: "#000",
titleFontSize: 20,
tickColor: "transparent",
lineColor: "#4A83BA",
},
axisY: {
title: "SEstimate Score",
interval:5,
gridThickness: 0,
labelFontSize: 14,
labelFontSize: 14,
labelFontColor: "#000",
titleFontColor: "#000",
titleFontSize: 20,
tickColor: "transparent",
lineColor: "#4A83BA",
maximum: 100,
},
data: [
{
type: "line",
color:"#4A83BA",
markerSize:0,
toolTipContent: "",
lineThickness:2,
dataPoints: [
{ x: 35, y: 35 },
{ x: 36, y: 35 },
{ x: 45, y: 35}
]
},
{
type: "line",
color:"#4A83BA",
toolTipContent: "",
markerSize:0,
lineThickness:2,
dataPoints: [
{ x: 42, y: 0 },
{ x: 42, y: 43 }
]
},
{
type: "line",
color:"#00B2EC",
lineThickness:2,
markerSize:30,
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 37 },
{ x: 55, y:42 }
]
},
{
type: "scatter",
color:"#00B2EC",
indexLabelPlacement: "inside",
indexLabelFontSize: 16,
indexLabelFontColor: "#fff",
markerSize:30,
markerBorderThickness: 1,
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 37, indexLabel:"5" },
{ x: 55, y:42, indexLabel:"5" }
]
},
{
type: "line",
color:"purple",
toolTipContent: "",
lineThickness:2,
markerSize:30,
markerBorderThickness: 1,
markerBorderColor: "#79A2BF",
dataPoints: [
{ x: 43, y: 35 },
{ x: 48, y: 43 },
{ x: 55, y: 54 },
{ x: 61, y: 60 },
{ x: 67, y: 70 },
]
},
{
type: "scatter",
color:"purple",
toolTipContent: "",
indexLabelPlacement:...