JSFiddle - React, Tailwind, and code Playground

by Chronos90

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>

JavaScript

var charts = {
    chartOne: {
        labels: ["Wert 1", "Wert 2", "Wert 3", "Wert 4"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81]
            }
        ]
    },
            
    chartTwo: {
        labels: ["Wert 1", "Wert 2", "Wert 3", "Wert 4"],
        datasets: [
            {
                label: "My Second dataset",
                fillColor: "rgba(220,220,220,0.5)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [10, 15, 30, 60]
            }
        ]
    }
};
        
creatChartCanvas(charts);

function creatChartCanvas(obj) {
    for (var property in obj) {
        if (!obj.hasOwnProperty(property)) {
            // Die aktuelle Property ist keine des aktuellen Objekts
            continue;
        }
            
        // creates Canvas with ID from charts object
        $('body').append('<canvas id="' + property + '" width="400" height="400"></canvas>');
            
        var canvasContext = new Object();
        canvasContext.property = $('#' + property).get(0).getContext("2d");
        console.log(canvasContext.property);
    }
}