JavaScript
var ctx = document.getElementById("stackedLine").getContext("2d");
const colors = {
green: {
fill: '#e0eadf',
stroke: '#5eb84d',
},
lightBlue: {
stroke: '#6fccdd',
},
darkBlue: {
fill: '#92bed2',
stroke: '#3282bf',
},
purple: {
fill: '#8fa8c8',
stroke: '#75539e',
},
};
//var USDT_amount = [0, 2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000, 18000];
//var XVG_amount = [0, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000];
//var xData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var stackedLine = new Chart(ctx, {
type: 'line',
data: {
labels: [1,2,3,4,5],
datasets: [{
label: "USDT",
fill: true,
backgroundColor: colors.green.fill,
pointBackgroundColor: colors.green.stroke,
borderColor: colors.green.stroke,
pointHighlightStroke: colors.green.stroke,
borderCapStyle: 'butt',
data: [1,2,3,4,8],
steppedLine: 'before'
}, {
label: "XVG",
fill: true,
backgroundColor: colors.darkBlue.fill,
pointBackgroundColor: colors.darkBlue.stroke,
borderColor: colors.darkBlue.stroke,
pointHighlightStroke: colors.darkBlue.stroke,
borderCapStyle: 'butt',
data: [4,5,6],
steppedLine: 'before'
}]
},
options: {
elements: {
point: {
radius: 0
},
line: {
...