JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var dataPoints = [];
var chart;
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
chart = new CanvasJS.Chart("chartContainer",{
animationEnabled: true,
theme: "light2",
backgroundColor: "#1E1E1E",
title: {
titleFontSize: 3,
text: "Grafik"
},
toolTip: {
enabled: true,
animationEnabled: true,
borderColor: "#29F800",
fillOpacity: 0.1,
borderThickness: 2,
fontColor: "#F40206",
backgroundColor: "#1E1E1E",
content: "{y}"
},
axisX: {
includeZero: false,
titleFontSize: 0,
labelFontSize: 0,
gridThickness: 0,
tickLength: 0,
lineThickness: 1,
lineColor: "#29624A"
},
axisY: {
includeZero: false,
titleFontSize: 0,
labelFontSize: 0,
gridThickness: 0,
tickLength: 0,
lineThickness: 1,
lineColor: "#29624A",
stripLines: [{
value: dataPoints[dataPoints.length - 1].y,
label: dataPoints[dataPoints.length - 1].y
}]
},
data: [{
type: "splineArea",
toolTipContent: "Price: </b>${y}",
fillOpacity: 0.2,
lineColor: "#00FBFF",
exportEnabled: true,
lineThickness: 2,
markerType: "square",
markerColor: "red",
markerSize: 12,
opacity: 0.8,
markerBorderThickness: 1.5,
markerBorderColor: "#00FBFF",
dataPoints : dataPoints,
}]
});
chart.render();
updateChart();
});
function updateChart() {
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=" + (dataPoints.length + 1) + "&ystart=" + (dataPoints[dataPoints.length - 1].y) + "&length=1&type=json", function(data) {
$.each(data, function(key, value) {
dataPoints.push({
x: parseInt(value[0]),
y: parseInt(value[1])
});
...