CanvasJS for PhantomJS
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="https://chart-templates.com/assets/libs/apps/canvasjs/2.0-beta1/jquery.canvasjs.min.js" type="text/javascript"></script>
<div class="chart_cont">
<div id="chart_div"></div>
</div>
CSS
body {
padding: 0;
margin: 0;
border: none;
}
#chart_div, #ContentChartPh_chart_img, .chart_cont {
width: 300px;
height: 185px;
padding: 0;
margin: 0;
border: none;
position: relative;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#chart_div {
background-repeat: no-repeat;
background-position: center center;
background-color: #fff;
}
#chart_div svg { height: 185px; }
img { z-index: -1; }
JavaScript
$(function () { makeChart(); });
function makeChart() {
var colorPalette = ["#418cf0", "#fcb441", "#e0400a", "#056492", "#bfbfbf", "#1a3b69", "#ffe382", "#129cdd", "#ca6b4b", "#005cdb", "#f3d288", "#506381", "#f1b9a8", "#e0830a", "#7893be"];
CanvasJS.addColorSet("customColors", colorPalette);
var options = {
width: 300,
height: 185,
colorSet: "customColors",
interactivityEnabled: false,
backgroundColor: "transparent",
legend: {
},
axisX: {
labelFormatter: function () {
return " ";
},
lineThickness: 0,
gridThickness: 0,
tickThickness: 0,
stripLines: [],
},
axisY: {
labelFormatter: function () {
return " ";
},
lineThickness: 0,
gridThickness: 0,
tickThickness: 0,
stripLines: [
],
},
toolTip: {
enabled: false,
},
};
var series0 = 0;
var dataSource = [{
year: 1999,
high: 55,
low: 25,
close: 42
},
{
year: 2000,
high: 65,
low: 38,
close: 60
},
{
year: 2001,
high: 72,
low: 41,
close: 53
},
{
year: 2002,
high: 62,
low: 25,
close: 38
},
{
year: 2003,
high: 65,
low: 25,
close: 45
},
{
year: 2004,
high: 82,
low: 40,
close: 78
},
{
year: 2005,
high: 83,
low: 50,
close: 54
},
{
year: 2006,
high: 64,
low: 25,
close: 43
},
{
year: 2007,
high: 56,
low: 15,
close: 25
},
{
year: 2008,
high: 49,
low: 10,
close: 38
},
{
year: 2009,
high: 76,
low: 28,
close: 59
},
{
year: 2010,
high: 69,
low: 40,
close: 42
},
{
year: 2011,
high: 62,
low: 30,
close: 38
},
{
...