Chartjs-Displaying Charts in C# using ChartJS

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