No Preview

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.

Svelte Bootstrap Chart

Svelte Chart - Bootstrap 4 & Material Design

Line Chart

<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>

Radar Chart

<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>

Bar Chart

<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>

HorizontalBar Chart

<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>

Polar Chart

<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>

Pie Chart

<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>

Doughnut Chart

<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>

Bubble Chart

<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>

Scatter Chart

<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>