This script is configured to make your chartjs line chart looks elegant.

elegant-dashboard-with-chartjs.html

<div class="card col-md-8">
    <div class="cart-header">
    <span class="card-title">Today  </span>
      
      <span class="dot dot-red"></span>  Line red: <span class="text-red-600"> 0 RWF</span>
      
      <span class="dot dot-yellow"></span> Line green: <span class="text-yellow-600"> 0 RWF </span> 
    </div>
  <div class="card-body">
      <canvas id="transactionsChart" ></canvas>
    </div>
</div>

<div class="card col-md-12">
  <div class="cart-header">
      <span class="card-title">This Week: </span>
      
      <span class="dot dot-red"></span> Line red: <span class="text-red-600"> 0 RWF</span>
      
      <span class="dot dot-yellow"></span> Line green: <span class="text-yellow-600"> 0 RWF </span>  
      </div>
  <div class="card-header">
      <canvas id="last7DaysTransactions" ></canvas>
    </div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
<script type = "text/javascript" >
    var dataTransactions = {
        labels: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
        datasets: [{
                label: "RED",
                data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                lineTension: 0.1,
                borderWidth: 1,
                backgroundColor: "transparent",
                borderColor: "#6F42C1",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "#ce020c",
                pointBackgroundColor: "#ce020c",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "#ce020c",
                pointHoverBorderColor: "#ce020c",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,

            },
            {
                label: "YELLOW",
                data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
                lineTension: 0.1,
            borderWidth: 1,
            backgroundColor: "transparent",
            borderColor: "#6F42C1",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#fc0",
            pointBackgroundColor: "#fc0",
            pointBorderWidth: 5,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#fc0",
            pointHoverBorderColor: "#fc0",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,

            }
        ]
    };

var weeklyRevenue = {
    labels: ["2019-08-15","2019-08-16","2019-08-17","2019-08-18","2019-08-19","2019-08-20","2019-08-21","2019-08-22"],
    datasets: [{
            label: "RED",
            data: [0,0,0,0,0,0,0,0],
            lineTension: 0.1,
            borderWidth: 1,
            backgroundColor: "transparent",
            borderColor: "#6F42C1",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#ce020c",
            pointBackgroundColor: "#ce020c",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#ce020c",
            pointHoverBorderColor: "#ce020c",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
        },
        {
            label: "YELLOW",
            data: [0,0,0,0,0,0,0,0],
            lineTension: 0.01,
            borderWidth: 1,
            backgroundColor: "transparent",
            borderColor: "#6F42C1",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#fc0",
            pointBackgroundColor: "#fc0",
            pointBorderWidth: 5,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#fc0",
            pointHoverBorderColor: "#fc0",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
        }
    ]
};

// Chart options to beautify
var options = {
    maintainAspectRatio: false,
    legend: {
        display: false,
        labels: {
            fontColor: '#519FFD'
        },
    },
    scales: {
        xAxes: [{
            gridLines: {
                display: false
            }
        }],
        yAxes: [{

            stacked: true,
            gridLines: {
                display: true,
                color: "#e2e8f0"
            },
            ticks: {
                suggestedMax: 100000,
                suggestedMin: 0,
                beginAtZero: true,

                callback: function(value, index, values) {
                    // Abbreviate the millions
                    if (value > 1e6) {
                        return value / 1e6 + 'M Rwf';
                    }
                    // Abbreviate the thousands
                    if (value > 1e3) {
                        return value / 1e3 + 'K Rwf';
                    }
                    // No need to abbreviate
                    return value + 'K Rwf';
                }
            },

        }]
    },
    backgroundColor: {
        fill: 'transparent'
    }
};

var contextTransactions = document.getElementById("transactionsChart").getContext("2d");
var contextlast7DaysTransactions = document.getElementById("last7DaysTransactions").getContext("2d");

var chartInstance = new Chart(contextTransactions, {
    type: 'line',
    data: dataTransactions,
    options: options
});

var chartInstance = new Chart(contextlast7DaysTransactions, {
    type: 'line',
    data: weeklyRevenue,
    options: options
});
</script>

It will look to something similar to this one.