Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import Line from "svelte-chartjs/src/Line.svelte"
let dataLine = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: true,
lineTension: 0.3,
backgroundColor: "rgba(225, 204,230, .3)",
borderColor: "rgb(205, 130, 158)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgb(205, 130,1 58)",
pointBackgroundColor: "rgb(255, 255, 255)",
pointBorderWidth: 10,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgb(0, 0, 0)",
pointHoverBorderColor: "rgba(220, 220, 220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fill: true,
lineTension: 0.3,
backgroundColor: "rgba(184, 185, 210, .3)",
borderColor: "rgb(35, 26, 136)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgb(35, 26, 136)",
pointBackgroundColor: "rgb(255, 255, 255)",
pointBorderWidth: 10,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgb(0, 0, 0)",
pointHoverBorderColor: "rgba(220, 220, 220, 1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<Line data={dataLine} options={{ responsive: true }}/>
</MDBCol>
</MDBRow>
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import Radar from "svelte-chartjs/src/Radar.svelte"
let dataRadar= {
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
datasets: [
{
label: "My First dataset",
backgroundColor: "rgba(194, 116, 161, 0.5)",
borderColor: "rgb(194, 116, 161)",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: "My Second dataset",
backgroundColor: "rgba(71, 225, 167, 0.5)",
borderColor: "rgb(71, 225, 167)",
data: [28, 48, 40, 19, 96, 27,100]
}
]
}
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<Radar data={dataRadar} options={{ responsive: true }} />
</MDBCol>
</MDBRow>
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import Bar from "svelte-chartjs/src/Bar.svelte"
let data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "% of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 134,159,0.4)",
"rgba(98, 182, 239,0.4)",
"rgba(255, 218, 128,0.4)",
"rgba(113, 205, 205,0.4)",
"rgba(170, 128, 252,0.4)",
"rgba(255, 177, 101,0.4)"
],
borderWidth: 2,
borderColor: [
"rgba(255, 134, 159, 1)",
"rgba(98, 182, 239, 1)",
"rgba(255, 218, 128, 1)",
"rgba(113, 205, 205, 1)",
"rgba(170, 128, 252, 1)",
"rgba(255, 177, 101, 1)"
]
}
]
};
let options = {
responsive: true,
scales: {
xAxes: [
{
barPercentage: 1,
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
}
}
],
yAxes: [
{
gridLines: {
display: true,
color: "rgba(0, 0, 0, 0.1)"
},
ticks: {
beginAtZero: true
}
}
]
}
}
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<Bar {data} {options} />
</MDBCol>
</MDBRow>
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import HorizontalBar from "svelte-chartjs/src/HorizontalBar.svelte"
let data = {
labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Purple', 'Grey'],
datasets: [
{
label: 'My First Dataset',
data: [22, 33, 55, 12, 86, 23, 14],
fill: false,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}
]
};
let options = {
responsive: true
}
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<HorizontalBar {data} {options}/>
</MDBCol>
</MDBRow>
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import Polar from "svelte-chartjs/src/Polar.svelte"
let data = {
datasets: [
{
data: [300, 50, 100, 40, 120],
backgroundColor: [
"rgba(247, 70, 74, 0.5)",
"rgba(70, 191, 189, 0.5)",
"rgba(253, 180, 92, 0.5)",
"rgba(148, 159, 177, 0.5)",
"rgba(77, 83, 96, 0.5)"
],
label: "My dataset" // for legend
}
],
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"]
};
let options = {
responsive: true
}
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<Polar {data} {options}/>
</MDBCol>
</MDBRow>
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import Pie from "svelte-chartjs/src/Pie.svelte"
let data = {
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
datasets: [
{
data: [300, 50, 100, 40, 120],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
"#AC64AD"
],
hoverBackgroundColor: [
"#FF5A5E",
"#5AD3D1",
"#FFC870",
"#A8B3C5",
"#616774",
"#DA92DB"
]
}
]
};
let options = {
responsive: true
}
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<Pie {data} {options}/>
</MDBCol>
</MDBRow>
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import Doughnut from "svelte-chartjs/src/Doughnut.svelte"
let data = {
labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
datasets: [
{
data: [300, 50, 100, 40, 120],
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
hoverBackgroundColor: [
"#FF5A5E",
"#5AD3D1",
"#FFC870",
"#A8B3C5",
"#616774"
]
}
]
};
let options = {
responsive: true
}
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<Doughnut {data} {options}/>
</MDBCol>
</MDBRow>
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import Bubble from "svelte-chartjs/src/Bubble.svelte"
let data = {
labels: 'Bubble',
datasets: [
{
label: 'John',
data: [
{
x: 3,
y: 7,
r: 10
}
],
backgroundColor: '#ff6384',
hoverBackgroundColor: '#ff6384'
},
{
label: 'Peter',
data: [
{
x: 3.2,
y: 7,
r: 10
}
],
backgroundColor: '#44e4ee',
hoverBackgroundColor: '#44e4ee'
},
{
label: 'Donald',
data: [
{
x: 3.4,
y: 7,
r: 10
}
],
backgroundColor: '#62088A',
hoverBackgroundColor: '#62088A'
}
]
};
let options = {
responsive: true
}
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<Bubble {data} {options}/>
</MDBCol>
</MDBRow>
<script>
import {MDBRow, MDBCol} from "mdbsvelte";
import Scatter from "svelte-chartjs/src/Scatter.svelte"
let data = {
labels: ['Scatter'],
datasets: [
{
borderColor: 'rgba(99,0,125, .2)',
backgroundColor: 'rgba(99,0,125, .5)',
label: 'V(node2)',
data: [
{
x: 1,
y: -1.711e-2
},
{
x: 1.26,
y: -2.708e-2
},
{
x: 1.58,
y: -4.285e-2
},
{
x: 2.0,
y: -6.772e-2
},
{
x: 2.51,
y: -1.068e-1
},
{
x: 3.16,
y: -1.681e-1
},
{
x: 3.98,
y: -2.635e-1
},
{
x: 5.01,
y: -4.106e-1
},
{
x: 6.31,
y: -6.339e-1
},
{
x: 7.94,
y: -9.659e-1
},
{
x: 10.0,
y: -1.445
},
{
x: 12.6,
y: -2.11
},
{
x: 15.8,
y: -2.992
},
{
x: 20.0,
y: -4.102
},
{
x: 25.1,
y: -5.429
},
{
x: 31.6,
y: -6.944
},
{
x: 39.8,
y: -8.607
},
{
x: 50.1,
y: -1.038e1
},
{
x: 63.1,
y: -1.223e1
},
{
x: 79.4,
y: -1.413e1
},
{
x: 100.0,
y: -1.607e1
},
{
x: 126,
y: -1.803e1
},
{
x: 158,
y: -2e1
},
{
x: 200,
y: -2.199e1
},
{
x: 251,
y: -2.398e1
},
{
x: 316,
y: -2.597e1
},
{
x: 398,
y: -2.797e1
},
{
x: 501,
y: -2.996e1
},
{
x: 631,
y: -3.196e1
},
{
x: 794,
y: -3.396e1
},
{
x: 1000,
y: -3.596e1
}
]
}
]
};
let options = {
title: {
display: true,
text: 'Scatter Chart - Logarithmic X-Axis'
},
scales: {
xAxes: [
{
type: 'logarithmic',
position: 'bottom',
ticks: {
userCallback: function (tick) {
var remain =
tick / Math.pow(10, Math.floor(Chart.helpers.log10(tick)));
if (remain === 1 || remain === 2 || remain === 5) {
return tick.toString() + 'Hz';
}
return '';
}
},
scaleLabel: {
labelString: 'Frequency',
display: true
}
}
],
yAxes: [
{
type: 'linear',
ticks: {
userCallback: function (tick) {
return tick.toString() + 'dB';
}
},
scaleLabel: {
labelString: 'Voltage',
display: true
}
}
]
}
};
</script>
<MDBRow>
<MDBCol md="8" class="mx-auto">
<Scatter {data} {options}/>
</MDBCol>
</MDBRow>