ChartJS - Efnify

Area Chart

HTML
JS

                                                    
<div style="min-height: 375px">
    <canvas id="chartjs-area-chart"></canvas>
</div>

                                                    
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};

var areaConfig = {
type: 'line',
data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        backgroundColor: '#ffcccc',
        borderColor: window.chartColors.red,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ],
        fill: true,
    }, {
        label: "My Second dataset",
        fill: true,
        backgroundColor: '#9cb3fc',
        borderColor: window.chartColors.blue,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ],
    }]
},
options: {
    responsive: true,                     maintainAspectRatio: false,
    title: {
        display: true,
        text: 'Area Chart'
    },
    tooltips: {
        mode: 'index',
        intersect: false,
    },
    hover: {
        mode: 'nearest',
        intersect: true
    },
    scales: {
        xAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Month'
            }
        }],
        yAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Value'
            }
        }]
    }
}
};

// Chart initialize
var areaCtx = document.getElementById("chartjs-area-chart").getContext("2d");
window.myArea = new Chart(areaCtx, areaConfig);

Bar Chart

HTML
JS

                                                    
<div style="min-height: 375px"> <canvas id="chartjs-bar-chart"></canvas></div>

                                                    
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};

var barConfig = {
type: 'bar',
data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: 'Dataset 1',
        backgroundColor: window.chartColors.red,
        borderColor: window.chartColors.red,
        borderWidth: 1,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ]
    }, {
        label: 'Dataset 2',
        backgroundColor: window.chartColors.blue,
        borderColor: window.chartColors.blue,
        borderWidth: 1,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ]
    }]

},
options: {
    responsive: true,                     maintainAspectRatio: false,
    title: {
        display: true,
        text: 'Bar Chart'
    },
    tooltips: {
        mode: 'index',
        intersect: false,
    },
    hover: {
        mode: 'nearest',
        intersect: true
    },
    scales: {
        xAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Month'
            }
        }],
        yAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Value'
            }
        }]
    }
}
};

// chart initialize
var barCtx = document.getElementById("chartjs-bar-chart").getContext("2d");
window.mybar = new Chart(barCtx, barConfig);

Line Chart

HTML
JS

                                                    
<div style="min-height: 375px"> <canvas id="chartjs-line-chart"></canvas></div>

                                                    
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};

var lineConfig = {
type: 'line',
data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        backgroundColor: window.chartColors.red,
        borderColor: window.chartColors.red,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ],
        fill: false,
    }, {
        label: "My Second dataset",
        fill: false,
        backgroundColor: window.chartColors.blue,
        borderColor: window.chartColors.blue,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ],
    }]
},
options: {
    responsive: true,                     maintainAspectRatio: false,
    title: {
        display: true,
        text: 'Line Chart'
    },
    tooltips: {
        mode: 'index',
        intersect: false,
    },
    hover: {
        mode: 'nearest',
        intersect: true
    },
    scales: {
        xAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Month'
            }
        }],
        yAxes: [{
            display: true,
            scaleLabel: {
                display: true,
                labelString: 'Value'
            }
        }]
    }
}
};

// chart initialize
var lineCtx = document.getElementById("chartjs-line-chart").getContext("2d");
window.myLine = new Chart(lineCtx, lineConfig);

Pie Chart

HTML
JS

                                                    
<div style="min-height: 375px"> <canvas id="chartjs-pie-chart"></canvas></div>

                                                    
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};

var pieConfig = {
type: 'pie',
data: {
    datasets: [{
        data: [
            400, 300, 100, 800, 600
        ],
        backgroundColor: [
            window.chartColors.red,
            window.chartColors.orange,
            window.chartColors.yellow,
            window.chartColors.green,
            window.chartColors.blue,
        ],
        label: 'Dataset 1'
    }],
    labels: [
        "Red",
        "Orange",
        "Yellow",
        "Green",
        "Blue"
    ]
},
options: {
    responsive: true
}
};

// chart initialize
var pieCtx = document.getElementById("chartjs-pie-chart").getContext("2d");
window.myPie = new Chart(pieCtx, pieConfig);

Donut Chart

HTML
JS

                                                    
<div style="min-height: 375px"> <canvas id="chartjs-doughnut-chart"></canvas></div>

                                                    
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};

var doughnutConfig = {
type: 'doughnut',
data: {
    datasets: [{
        data: [
            400, 300, 100, 800, 600
        ],
        backgroundColor: [
            window.chartColors.red,
            window.chartColors.orange,
            window.chartColors.yellow,
            window.chartColors.green,
            window.chartColors.blue,
        ],
        label: 'Dataset 1'
    }],
    labels: [
        "Red",
        "Orange",
        "Yellow",
        "Green",
        "Blue"
    ]
},
options: {
    responsive: true
}
};

// chart initialize
var doughnutCtx = document.getElementById("chartjs-doughnut-chart").getContext("2d");
window.myDoughnut = new Chart(doughnutCtx, doughnutConfig);

Combo Chart

HTML
JS

                                                    
<div style="min-height: 375px"> <canvas id="chartjs-combo-chart"></canvas></div>

                                                    
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};

var comboConfig = {
type: 'bar',
data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        type: 'line',
        label: 'Dataset 1',
        borderColor: window.chartColors.blue,
        borderWidth: 2,
        fill: false,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ]
    }, {
        type: 'bar',
        label: 'Dataset 2',
        backgroundColor: window.chartColors.red,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ],
        borderColor: 'white',
        borderWidth: 2
    }, {
        type: 'bar',
        label: 'Dataset 3',
        backgroundColor: window.chartColors.green,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ]
    }]
},
options: {
    responsive: true,                     maintainAspectRatio: false,
    title: {
        display: true,
        text: 'Combo Bar Line Chart'
    },
    tooltips: {
        mode: 'index',
        intersect: true
    }
}
};

// chart initialize
var comboCtx = document.getElementById("chartjs-combo-chart").getContext("2d");
window.myCombo = new Chart(comboCtx, comboConfig);

Polar Area Chart

HTML
JS

                                                    
<div style="min-height: 375px"> <canvas id="chartjs-polar-area-chart"></canvas></div>

                                                    
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};

var polarAreaConfig = {
data: {
    datasets: [{
        data: [
            90, 300, 600, 400, 100
        ],
        backgroundColor: [
            window.chartColors.red,
            window.chartColors.orange,
            window.chartColors.yellow,
            window.chartColors.green,
            window.chartColors.blue,
        ],
        label: 'My dataset' // for legend
    }],
    labels: [
        "Red",
        "Orange",
        "Yellow",
        "Green",
        "Blue"
    ]
},
options: {
    responsive: true,                     maintainAspectRatio: false,
    legend: {
        position: 'right',
    },
    title: {
        display: true,
        text: 'Polar Area Chart'
    },
    scale: {
        ticks: {
            beginAtZero: true
        },
        reverse: false
    },
    animation: {
        animateRotate: false,
        animateScale: true
    }
}
};

// Polar area chart initialize
var polarAreactx = document.getElementById("chartjs-polar-area-chart");
window.myPolarArea = Chart.PolarArea(polarAreactx, polarAreaConfig);

Radar Chart

HTML
JS

                                                    
<div style="min-height: 375px">
    <canvas id="chartjs-radar-chart"></canvas>
</div>

                                                    
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};

window.randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
};
var color = Chart.helpers.color;
var radarConfig = {
type: 'radar',
data: {
    labels: [
        ["Eating", "Dinner"],
        ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"
    ],
    datasets: [{
        label: "My First dataset",
        backgroundColor: color(window.chartColors.red).alpha(0.2).rgbString(),
        borderColor: window.chartColors.red,
        pointBackgroundColor: window.chartColors.red,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ]
    }, {
        label: "My Second dataset",
        backgroundColor: color(window.chartColors.blue).alpha(0.2).rgbString(),
        borderColor: window.chartColors.blue,
        pointBackgroundColor: window.chartColors.blue,
        data: [
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor(),
            randomScalingFactor()
        ]
    }, ]
},
options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
        position: 'top',
    },
    title: {
        display: true,
        text: 'Radar Chart'
    },
    scale: {
        ticks: {
            beginAtZero: true
        }
    }
}
};

// Radar chart initialize
window.myRadar = new Chart(document.getElementById("chartjs-radar-chart"), radarConfig);