JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://igniteui.com/js-data/financial-data"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<div id="slNightSky"></div>
<div id="slSnakeSkin"></div>
CSS
#slNightSky {
border-color: #FFFFFF;
}
#slSnakeSkin {
border-color: #FFFFFF;
margin: 20px 0 0 0;
}
JavaScript
$(function () {
$("#slNightSky").igSparkline({
dataSource: randomOldData,
displayType: "area",
height: "120px",
width: "100%",
valueMemberPath: 'Change',
brush: "#446185",
normalRangeVisibility: "visible",
trendLineBrush: "#d0d0e0",
trendLineType: "simpleAverage",
markerVisibility: "visible",
markerBrush: "#a8aec4",
markerSize: 1
});
$("#slSnakeSkin").igSparkline({
dataSource: randomOldData,
displayType: "column",
height: "120px",
width: "100%",
valueMemberPath: 'Change',
labelMemberPath: 'DateString',
horizontalAxisVisibility: 'visible',
verticalAxisVisibility: 'visible',
negativeBrush: "#cfc8c0",
negativeMarkerVisibility: "collapsed",
brush: "#bdada1",
normalRangeVisibility: "visible",
trendLineBrush: "#403636",
trendLineType: "simpleAverage",
markerVisibility: "visible",
markerBrush: "#6e5348",
trendLineThickness: 2
});
});