Chartjs-Creating a Reusable Chartjs Function

You can just make a simple function that takes the config and canvas as parameters and then returns the chart like this:

var ctx_category_driving = document.getElementById('myChart_Category_Drving').getContext('2d');
    
var data = {
    // labels: ["Chocolate", "Vanilla", "Strawberry"],
    labels: {{ lbl_category_driving|safe }},
    datasets: [
        {
            label: "acceptable",
            // backgroundColor: "blue",
            data: {{ data_cat_driving_acceptable|safe }},
            fill: true,

            // backgroundColor: "rgba(179,181,198,0.2)",
            backgroundColor: "#3cba9f",
            borderColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointBackgroundColor: "rgba(179,181,198,1)",
        },
        {
            label: "unacceptable",
            // backgroundColor: "red",
            data: {{ data_cat_driving_unacceptable|safe }},
            fill: true,

            // backgroundColor: "rgba(255,99,132,0.2)",
            // backgroundColor: "rgba(216, 27, 96, 0.6)",
            backgroundColor: "rgba(216, 27, 96, 0.6)",
            borderColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointBackgroundColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
        },

    ]
};

function createChart(ctx, data) {
    return new Chart(ctx,  {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            barValueSpacing: 20,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                    }
                }]
            }
        }
    })
}

var myBarChart = createChart(ctx_category_driving, data)

If your data is also the same for all 7 charts you can also put that in the function like so:

var barChart =  createChart()
    

function createChart() {
    return new Chart(document.getElementById('myChart_Category_Drving').getContext('2d'),  {
        type: 'bar',
        data: {
            // labels: ["Chocolate", "Vanilla", "Strawberry"],
            labels: {{ lbl_category_driving|safe }},
            datasets: [
                {
                    label: "acceptable",
                    // backgroundColor: "blue",
                    data: {{ data_cat_driving_acceptable|safe }},
                    fill: true,

                    // backgroundColor: "rgba(179,181,198,0.2)",
                    backgroundColor: "#3cba9f",
                    borderColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                },
                {
                    label: "unacceptable",
                    // backgroundColor: "red",
                    data: {{ data_cat_driving_unacceptable|safe }},
                    fill: true,

                    // backgroundColor: "rgba(255,99,132,0.2)",
                    // backgroundColor: "rgba(216, 27, 96, 0.6)",
                    backgroundColor: "rgba(216, 27, 96, 0.6)",
                    borderColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                },

            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            barValueSpacing: 20,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                    }
                }]
            }
        }
    })
}

Thanks for all your help thus far.

I think I need a hybrid of the solutions you provided, in that all the data values and labels should be passed to the javascript function. I have attempted to do so in the following code but it is not working as the chart is blank. Can you please take a look and provide some further guidance if you can?

<script>
 //category charts  as function 
 
function createChart(chart_element, lbl, data_acceptable, data_unacceptable) {
    return new Chart(document.getElementById(chart_element).getContext('2d'),  {
        type: 'bar',
        data: {
            // labels: ["Chocolate", "Vanilla", "Strawberry"],
            labels: lbl,
            datasets: [
                {
                    label: "acceptable",
                    // backgroundColor: "blue",
                    data: data_acceptable,
                    fill: true,

                    // backgroundColor: "rgba(179,181,198,0.2)",
                    backgroundColor: "#3cba9f",
                    borderColor: "rgba(179,181,198,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(179,181,198,1)",
                },
                {
                    label: "unacceptable",
                    // backgroundColor: "red",
                    data: data_unacceptable,
                    fill: true,

                    // backgroundColor: "rgba(255,99,132,0.2)",
                    // backgroundColor: "rgba(216, 27, 96, 0.6)",
                    backgroundColor: "rgba(216, 27, 96, 0.6)",
                    borderColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                    pointBackgroundColor: "rgba(255,99,132,1)",
                    pointBorderColor: "#fff",
                },

            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            barValueSpacing: 20,
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                    }
                }]
            }
        }
    })
}


var lbl_driving = {{ lbl_category_driving|safe }},
var data_driving_acceptable = {{ data_cat_driving_acceptable|safe }}
var data_driving_unacceptable = {{ data_cat_driving_unacceptable|safe }},

var canvas_driving = document.getElementById('myChart_Category_Drving').value;

var barChartGrp_Driving =  createChart( canvas_driving, lbl_driving, data_driving_acceptable, data_driving_unacceptable )



</script>