How to use chartjs-color - 8 common examples
To help you get started, we’ve selected a few chartjs-color examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
bojand / ghz / web / ui / src / lib / projectChartData.js View on Github 
}
rpsData[i] = {
x: d,
y: formatFloat(chartData.rps[i])
}
})
const cubicInterpolationMode = 'monotone' // set to 'default' to get cubic
const lineTension = undefined // set to 0 to have straing lines
const borderWidth = 1.75
const pointRadius = 1.75
const datasets = [
{
label: 'Average',
backgroundColor: color(colors.skyBlue).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.blue,
fill: false,
data: avgData,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
lineTension,
borderWidth,
pointRadius
},
{
label: 'Fastest',
backgroundColor: color(colors.green).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.green,
fill: false,
data: fastData,
yAxisID: 'y-axis-lat',continue;
}
if (!Object.prototype.hasOwnProperty.call(start, key)) {
start[key] = actual;
}
origin = start[key];
type = typeof target;
if (type === typeof origin) {
if (type === 'string') {
c0 = color(origin);
if (c0.valid) {
c1 = color(target);
if (c1.valid) {
view[key] = c1.mix(c0, ease).rgbString();
continue;
}
}
} else if (helpers.isFinite(origin) && helpers.isFinite(target)) {
view[key] = origin + (target - origin) * ease;
continue;
}
}
view[key] = target;
}
}if (actual === target || key[0] === '_') {
continue;
}
if (!Object.prototype.hasOwnProperty.call(start, key)) {
start[key] = actual;
}
origin = start[key];
type = typeof target;
if (type === typeof origin) {
if (type === 'string') {
c0 = color(origin);
if (c0.valid) {
c1 = color(target);
if (c1.valid) {
view[key] = c1.mix(c0, ease).rgbString();
continue;
}
}
} else if (helpers.isFinite(origin) && helpers.isFinite(target)) {
view[key] = origin + (target - origin) * ease;
continue;
}
}
view[key] = target;
}
}},
{
label: '95th',
backgroundColor: color(colors.orange).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.orange,
fill: false,
data: n5Data,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
},
{
label: '99th',
backgroundColor: color(colors.purple).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.purple,
fill: false,
data: n9Data,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
},
{
label: 'RPS',
backgroundColor: color(colors.grey).alpha(0.5).lighten(0.1).rgbString(),
borderColor: colors.grey,
fill: false,
data: rpsData,
yAxisID: 'y-axis-rps',const datasets = [
{
label: 'Average',
backgroundColor: color(colors.skyBlue).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.blue,
fill: false,
data: avgData,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
lineTension,
borderWidth,
pointRadius
},
{
label: 'Fastest',
backgroundColor: color(colors.green).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.green,
fill: false,
data: fastData,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
},
{
label: 'Slowest',
backgroundColor: color(colors.red).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.red,
fill: false,
data: slowData,
yAxisID: 'y-axis-lat',},
{
label: '99th',
backgroundColor: color(colors.purple).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.purple,
fill: false,
data: n9Data,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
},
{
label: 'RPS',
backgroundColor: color(colors.grey).alpha(0.5).lighten(0.1).rgbString(),
borderColor: colors.grey,
fill: false,
data: rpsData,
yAxisID: 'y-axis-rps',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
}
]
const labelStr = `Latency (${unit})`
var config = {
type: 'line',
data: {},
{
label: 'Fastest',
backgroundColor: color(colors.green).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.green,
fill: false,
data: fastData,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
},
{
label: 'Slowest',
backgroundColor: color(colors.red).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.red,
fill: false,
data: slowData,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
},
{
label: '95th',
backgroundColor: color(colors.orange).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.orange,
fill: false,
data: n5Data,
yAxisID: 'y-axis-lat',},
{
label: 'Slowest',
backgroundColor: color(colors.red).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.red,
fill: false,
data: slowData,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
},
{
label: '95th',
backgroundColor: color(colors.orange).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.orange,
fill: false,
data: n5Data,
yAxisID: 'y-axis-lat',
cubicInterpolationMode,
borderWidth,
pointRadius,
lineTension
},
{
label: '99th',
backgroundColor: color(colors.purple).alpha(0.5).lighten(0.5).rgbString(),
borderColor: colors.purple,
fill: false,
data: n9Data,
yAxisID: 'y-axis-lat',chartjs-color
Color conversion and manipulation with CSS string support
