| Line Chart |
<script>
import Line from 'svelte-chartjs/src/Line.svelte';
export let dataColors;
function getChartColorsArray(colors) {
// colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(' ', '');
if (newValue.indexOf(',') === -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
if (color.indexOf('#') !== -1) color = color.replace(' ', '');
if (color) return color;
else return newValue;
} else {
var val = value.split(',');
if (val.length === 2) {
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
rgbaColor = 'rgba(' + rgbaColor + ',' + val[1] + ')';
return rgbaColor;
} else {
return newValue;
}
}
});
}
var lineChartColor = getChartColorsArray(dataColors);
const data = {
labels: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October'
],
datasets: [
{
label: 'Sales Analytics',
fill: true,
lineTension: 0.5,
backgroundColor: lineChartColor[0],
borderColor: lineChartColor[1],
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: lineChartColor[1],
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: lineChartColor[1],
pointHoverBorderColor: '#fff',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
},
{
label: 'Monthly Earnings',
fill: true,
lineTension: 0.5,
backgroundColor: lineChartColor[2],
borderColor: lineChartColor[3],
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: lineChartColor[3],
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: lineChartColor[3],
pointHoverBorderColor: '#eef0f2',
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36]
}
],
};
</script>
<Line class="chartjs-chart" {data} option={{ responsive: true }} />
|
| Bar Chart |
<script>
import Bar from "svelte-chartjs/src/Bar.svelte"
export let dataColors;
function getChartColorsArray(colors) {
// colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(' ', '');
if (newValue.indexOf(',') === -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
if (color.indexOf('#') !== -1) color = color.replace(' ', '');
if (color) return color;
else return newValue;
} else {
var val = value.split(',');
if (val.length === 2) {
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
rgbaColor = 'rgba(' + rgbaColor + ',' + val[1] + ')';
return rgbaColor;
} else {
return newValue;
}
}
});
}
var barChartColor = getChartColorsArray(dataColors);
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "Sales Analytics",
backgroundColor: barChartColor[0],
borderColor: barChartColor[0],
borderWidth: 1,
hoverBackgroundColor: barChartColor[1],
hoverBorderColor: barChartColor[1],
data: [65, 59, 81, 45, 56, 80, 50,20]
}
]
}
</script>
<Bar class="chartjs-chart" {data} option={{ responsive: true }} />
|
| Pie Chart |
<script>
import Pie from 'svelte-chartjs/src/Pie.svelte';
export let dataColors;
function getChartColorsArray(colors) {
// colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(' ', '');
if (newValue.indexOf(',') === -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
if (color.indexOf('#') !== -1) color = color.replace(' ', '');
if (color) return color;
else return newValue;
} else {
var val = value.split(',');
if (val.length === 2) {
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
rgbaColor = 'rgba(' + rgbaColor + ',' + val[1] + ')';
return rgbaColor;
} else {
return newValue;
}
}
});
}
var pieChartColors = getChartColorsArray(dataColors);
const data={
labels: [
"Desktops",
"Tablets"
],
datasets: [
{
data: [300, 180],
backgroundColor: pieChartColors,
hoverBackgroundColor: pieChartColors,
hoverBorderColor: "#fff"
}]
}
</script>
<Pie class="chartjs-chart" {data} option={{ responsive: true, maintainAspectRatio: false }} />
|
| Donut Chart |
<script>
import Doughnut from 'svelte-chartjs/src/Doughnut.svelte';
export let dataColors;
function getChartColorsArray(colors) {
// colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(' ', '');
if (newValue.indexOf(',') === -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
if (color.indexOf('#') !== -1) color = color.replace(' ', '');
if (color) return color;
else return newValue;
} else {
var val = value.split(',');
if (val.length === 2) {
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
rgbaColor = 'rgba(' + rgbaColor + ',' + val[1] + ')';
return rgbaColor;
} else {
return newValue;
}
}
});
}
var doughnutChartColors = getChartColorsArray(dataColors);
const data = {
labels: [
"Desktops",
"Tablets"
],
datasets: [
{
data: [300, 210],
backgroundColor: doughnutChartColors,
hoverBackgroundColor: doughnutChartColors,
hoverBorderColor: "#fff"
}]
}
</script>
<Doughnut {data} option={{ responsive: true }} class="chartjs-chart" />
|
| Polar Chart |
<script>
import Polar from 'svelte-chartjs/src/Polar.svelte';
export let dataColors;
function getChartColorsArray(colors) {
// colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(' ', '');
if (newValue.indexOf(',') === -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
if (color.indexOf('#') !== -1) color = color.replace(' ', '');
if (color) return color;
else return newValue;
} else {
var val = value.split(',');
if (val.length === 2) {
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
rgbaColor = 'rgba(' + rgbaColor + ',' + val[1] + ')';
return rgbaColor;
} else {
return newValue;
}
}
});
}
var polarAreaChartColors = getChartColorsArray(dataColors);
const data = {
labels: [
"Series 1",
"Series 2",
"Series 3",
"Series 4"
],
datasets: [{
data: [
11,
16,
7,
18
],
backgroundColor: polarAreaChartColors,
label: 'My dataset', // for legend
hoverBorderColor: "#fff"
}]
}
</script>
<Polar {data} option={{ responsive: true }} class="chartjs-chart" />
|
| Radar Chart |
<script>
import Radar from 'svelte-chartjs/src/Radar.svelte';
export let dataColors;
function getChartColorsArray(colors) {
// colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(' ', '');
if (newValue.indexOf(',') === -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
if (color.indexOf('#') !== -1) color = color.replace(' ', '');
if (color) return color;
else return newValue;
} else {
var val = value.split(',');
if (val.length === 2) {
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
rgbaColor = 'rgba(' + rgbaColor + ',' + val[1] + ')';
return rgbaColor;
} else {
return newValue;
}
}
});
}
var radarChartColors = getChartColorsArray(dataColors);
const data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'Desktops',
backgroundColor: radarChartColors[0],
borderColor: radarChartColors[1], //"#2ab57d",
pointBackgroundColor: radarChartColors[1], //"#2ab57d",
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: radarChartColors[1], //"#2ab57d",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'Tablets',
backgroundColor: radarChartColors[2], //"rgba(81, 86, 190, 0.2)",
borderColor: radarChartColors[3], //"#5156be",
pointBackgroundColor: radarChartColors[3], //"#5156be",
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: radarChartColors[3], //"#5156be",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
</script>
<Radar {data} option={{ responsive: true }} class="chartjs-chart" />
|
