Chartjs-Blank Canvas with labels at the top with strikethrough on them when using chart.js pie chart

by

0👍

If it helps anyone else, the solution was to put the colors into the PHP while loop so that when the chart_Data is inserted into the the javascript part, it already contains the color instructions in the correct format.

        //the relevant part of the PHP code
      
        // define an array of colors
        $colors = array(
            'rgba(76, 18, 161, 1)', 
            'rgba(229, 0, 109, 1)', 
            'rgba(205, 216, 223, 1)', 
            'rgba(76, 18, 161, 0.8)', 
            'rgba(229, 0, 109, 0.8)', 
            'rgba(205, 216, 223, 0.8)', 
            'rgba(76, 18, 161, 0.6)', 
            'rgba(229, 0, 109, 0.6)', 
            'rgba(205, 216, 223, 0.6)', 
            'rgba(76, 18, 161, 0.4)', 
            'rgba(229, 0, 109, 0.4)', 
            'rgba(205, 216, 223, 0.4)', 
            'rgba(76, 18, 161, 0.2)', 
            'rgba(229, 0, 109, 0.2)', 
            'rgba(205, 216, 223, 0.2)'
        );

        // set a counter variable for cycling through the colors array
        $color_counter = 0;

        // create an empty array to hold the chart data
        $data = array('labels' => array(), 'datasets' => array(array('data' => array())));

        
        // loop through the result and add the data to the chart array
        while ($GetFormPopularityRow = $GetFormPopularityResult->fetch_assoc()) {
            $data['labels'][] = $GetFormPopularityRow['form_name'];
            $data['datasets'][0]['data'][] = $GetFormPopularityRow['num_rows'];
            $data['datasets'][0]['backgroundColor'][] = $colors[$color_counter % count($colors)];
            $color_counter++;
        }

And the bit where we use the chart_data in the javascript

var ctx = document.getElementById('popforms').getContext('2d');
                var popforms = new Chart(ctx, {
                    type: 'pie',
                    data: chart_data,
                    options: {
                        responsive: true
                    }
                                            });
                                        }

Leave a comment