<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi Line Chart | JSCharting</title>
<meta http-equiv="content-type" content="text-html; charset=utf-8" />
<script type="text/javascript" src="../jsc/jscharting.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<style></style>
</head>
<body>
<div id="chartDiv" style="max-width: 740px;height: 400px;margin: 0px auto;"></div>
<script type="text/javascript">
/*
A styled line chart with time x axis scale.
Learn how to:
- Draw a line chart.
*/
// JS
var chart = JSC.chart('chartDiv', {
debug: true,
type: 'line',
legend_visible: false,
xAxis: {
crosshair_enabled: true,
scale: { type: 'time' }
},
yAxis: { orientation: 'opposite', formatString: 'c' },
defaultSeries: {
firstPoint_label_text: '<b>%seriesName</b>',
defaultPoint_marker: {
type: 'circle',
size: 8,
fill: 'white',
outline: { width: 2, color: 'currentColor' }
}
},
title_label_text: 'Small Cap Value',
series: [
{
name: 'Purchases',
points: [
['1/1/2020', 29.9],
['2/1/2020', 97.5],
['3/1/2020', 110.4],
['4/1/2020', 129.2],
['5/1/2020', 144.0],
['6/1/2020', 176.0]
]
},
{
name: 'Small Cap Value (Net of Fees)',
points: [
['1/1/2020', 86.9],
['2/1/2020', 79.5],
['3/1/2020', 95.4],
['4/1/2020', 97.2],
['5/1/2020', 123.0],
['6/1/2020', 111.0]
]
},
{
name: 'Gross of Fees',
points: [
['1/1/2020', 129.9],
['2/1/2020', 111.5],
['3/1/2020', 66.4],
['4/1/2020', 29.2],
['5/1/2020', 88.0],
['6/1/2020', 102.0]
]
},
{
name: 'S&P 600',
points: [
['1/1/2020', 56.9],
['2/1/2020', 56.5],
['3/1/2020', 56.4],
['4/1/2020', 56.2],
['5/1/2020', 75.0],
['6/1/2020', 56.0]
]
}
]
});
</script>
</body>
</html>
