Basic Column Chart - CanvasJS JavaScript Charts
Basic Column Chart - CanvasJS JavaScript Charts
HTML
<script src="http://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",
{
axisY: {
gridThickness: 0,
interval: .4,
minimum: -4.3,
maximum: 0,
stripLines: [
{
startValue: 0,
endValue: -2,
color: "#0066ff",
},
{
startValue: -2,
endValue: -4.3,
color: "#33FF64",
}
],
},
data: [
{
type: "line",
dataPoints: [
{ x: 10, y: -4.3, markerSize: 15},
{ x: 20, y: -4.2, markerSize: 15},
{ x: 30, y: -4.1, markerSize: 15},
{ x: 40, y: -4.0, markerSize: 15},
{ x: 50, y: -3.9, markerSize: 15 },
{ x: 60, y: -3.8, markerSize: 15 },
{ x: 70, y: 0, markerSize: 15},
{ x: 80, y: -3.5, markerSize: 15},
{ x: 90, y: -3.2, markerSize: 15}
]
}
]
});
chart.render();