score:0

Accepted answer

so far i understood you are looking for line-styles chart, actually, it's a line chart with some styles.

here is your update html

   <div class="report-card">
        <p class="text-center p-t-20 text-muted">monthly expenses</p>
        <canvas id="line_chart" height="150"></canvas>
    </div>
    <div class="report-card">
        <p class="text-center p-t-20 text-muted">monthly expenses</p>
        <canvas id="bar_chart" height="150"></canvas>
    </div>
    <div class="report-card">
        <p class="text-center p-t-20 text-muted">monthly expenses</p>
        <canvas id="line_styles_chart" height="150"></canvas>
    </div>

and the script.js file

$(function () {
    new chart(document.getelementbyid("line_chart").getcontext("2d"), getchartjs('line'));
    new chart(document.getelementbyid("bar_chart").getcontext("2d"), getchartjs('bar'));
    new chart(document.getelementbyid("line_styles_chart").getcontext("2d"), getchartjs('line-styles'));
});

function getchartjs(type) {
    var config = null;

    if (type === 'line') {
        config = {
            type: 'line',
            data: {
                labels: ["groceries", "rent", "utilities", "student loans", "car payment"],
                datasets: [{
                    label: "refund",
                    data: [65, 59, 80, 45, 56],
                    bordercolor: 'rgba(0, 188, 212, 0.75)',
                    backgroundcolor: 'rgba(0, 188, 212, 0.3)',
                    pointbordercolor: 'rgba(0, 188, 212, 0)',
                    pointbackgroundcolor: 'rgba(0, 188, 212, 0.9)',
                    pointborderwidth: 1
                }
                ]
            },
            options: {
                responsive: true,
                legend: false
            }

        }
    }
    else if (type === 'bar') {
        config = {
            type: 'bar',
            data: {
                labels: ["gas bill", "light bill", "rent", "cell phone bill", "water bill", "groceries", "spotify"],
                datasets: [{
                    label: "my first dataset",
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundcolor: 'rgba(0, 188, 212, 0.8)'
                }, {
                    label: "my second dataset",
                    data: [28, 48, 40, 19, 86, 27, 90],
                    backgroundcolor: 'rgba(233, 30, 99, 0.8)'
                }]
            },
            options: {
                responsive: true,
                legend: false
            }
        }
    }
    else if (type === 'line-styles') {
        var config = {
            type: 'line',
            data: {
                labels: ['january', 'february', 'march'],
                datasets: [{
                    label: 'gas bill',
                    fill: false,
                    backgroundcolor: 'rgba(0, 188, 212, 0.8)',
                    bordercolor: 'rgb(54, 162, 235)',
                    data: [0, 42, 55],
                }, {
                    label: 'light bill',
                    fill: false,
                    backgroundcolor: 'rgba(233, 30, 99, 0.8)',
                    bordercolor: 'rgb(75, 192, 192)',
                    borderdash: [5, 5],
                    data: [28, 48, 40],
                }, {
                    label: 'rent',
                    backgroundcolor: 'rgba(255, 209, 0, 0.8)',
                    bordercolor: 'rgb(255, 205, 86)',
                    data: [40, 27, 90],
                    fill: true,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'line styles 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'
                        }
                    }]
                }
            }
        };
    }
    return config;
}

Related Query

More Query from same tag