Home > front end >  Svelte , pass data to chartjs from API
Svelte , pass data to chartjs from API

Time:02-02

Im new to Svelte , im trying to create chart using API data but have problem pass data to chartjs from API

this is my chart.svelte

<script>
    import { onMount } from "svelte";
    import Chart from "chart.js/auto";

    export let stats;

    let ctx;

    onMount(async () => {
        const myChart = new Chart(ctx, {
            type: "bar",
            data: {
                labels: ["red"],
                datasets: [
                    {
                        label: "# of Votes",
                        data: stats.temp0,
                        backgroundColor: [
                            "rgba(255, 99, 132, 0.2)",
                            "rgba(54, 162, 235, 0.2)",
                            "rgba(255, 206, 86, 0.2)",
                            "rgba(75, 192, 192, 0.2)",
                            "rgba(153, 102, 255, 0.2)",
                            "rgba(255, 159, 64, 0.2)",
                        ],
                        borderColor: [
                            "rgba(255, 99, 132, 1)",
                            "rgba(54, 162, 235, 1)",
                            "rgba(255, 206, 86, 1)",
                            "rgba(75, 192, 192, 1)",
                            "rgba(153, 102, 255, 1)",
                            "rgba(255, 159, 64, 1)",
                        ],
                        borderWidth: 1,
                    },
                ],
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                    },
                },
            },
        });
    });
</script>

<div >
    <canvas id="myChart" width="400" height="100" bind:this={ctx} />
</div>

{#each stats as stat}
    <p>{stat.temp0}</p>
{/each}

the data stats is showing correctly in html loop (same component):

    {#each stats as stat}
    <p>{stat.temp0}</p>
{/each}

but not inside the <script>

im sure i need to loop first inside the script , but after many tries i have failed

how can i pass the data to dataset in chartjs script ?

stats API

[
  {
    "_id": "61f99f5d377c1357db3452e8",
    "temp0": "55",
    "temp1": "54",
    "updated_at": "2022-02-01 21:00:13"
  },
  {
    "_id": "61f99858377c1357db3452e7",
    "temp0": "55",
    "temp1": "55",
    "updated_at": "2022-02-01 20:30:16"
  },
  {
    "_id": "61f99153377c1357db3452e6",
    "temp0": "62",
    "temp1": "62",
"updated_at": "2022-02-01 19:25:16"
  },
  {
    "_id": "61f98a48377c1357db3452e5",
    "temp0": "57 ",
    "temp1": "55 ",
    "updated_at": "2022-02-01 19:30:16"
  }
]

CodePudding user response:

The chart component needs to be notified of the new data.

This can be achieved using reactive statements.

let myChart;

$: if (myChart) {
  myChart.data.datasets[0].data = [stats.temp0]; // update the data
  myChart.update(); // notify chart.js to render the new data
}

REPL

CodePudding user response:

Chart.js expects an array for the data field and not a single value, wrapping it with square brackets so it becomes an array with a single item will make it show up

<script>
    import { onMount } from "svelte";
    import Chart from "chart.js/auto";

    export let stats;

    let ctx;

    onMount(async () => {
        const myChart = new Chart(ctx, {
            type: "bar",
            data: {
                labels: ["red"],
                datasets: [
                    {
                        label: "# of Votes",
                        data: [stats.temp0],
                        backgroundColor: [
                            "rgba(255, 99, 132, 0.2)",
                            "rgba(54, 162, 235, 0.2)",
                            "rgba(255, 206, 86, 0.2)",
                            "rgba(75, 192, 192, 0.2)",
                            "rgba(153, 102, 255, 0.2)",
                            "rgba(255, 159, 64, 0.2)",
                        ],
                        borderColor: [
                            "rgba(255, 99, 132, 1)",
                            "rgba(54, 162, 235, 1)",
                            "rgba(255, 206, 86, 1)",
                            "rgba(75, 192, 192, 1)",
                            "rgba(153, 102, 255, 1)",
                            "rgba(255, 159, 64, 1)",
                        ],
                        borderWidth: 1,
                    },
                ],
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true,
                    },
                },
            },
        });
    });
</script>

<div >
    <canvas id="myChart" width="400" height="100" bind:this={ctx} />
</div>
  •  Tags:  
  • Related