I am trying to create custom Lighting Web Components to display a doughnut chart that process Salesforce data from the server.  I choose LWCC to build my custom chart.  Here is documentation: https://salesforcelabs.github.io/LightningWebChartJS/

When I use static values to build a graph, it works.  But when I try to use SOQL property in js file, I don't seem to grab the data properly.  I could not find any examples of using this property inside Lighting Web component:
Here is my JavaScript file code:

import { LightningElement, track} from 'lwc';
import chartjs from '@salesforce/resourceUrl/ChartJs';
import { loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class MyCustomChart extends LightningElement {
    @track isChartJsInitialized;
    chart;
    config = {
        type: 'doughnut',
        SOQL:'SELECT MailingState label, Count(Id) value FROM Contact WITH SECURITY_ENFORCED GROUP BY MailingState LIMIT 100',
options: {
            title: {
                display: true,
                text: 'Number of Members'
            }
        }
    };
    renderedCallback() {
        if (this.isChartJsInitialized) {
            return;
        }
        this.isChartJsInitialized = true;
        Promise.all([
            loadScript(this, chartjs)
        ]).then(() => {
            const ctx = this.template.querySelector('canvas.linechart').getContext('2d');
            this.chart = new window.Chart(ctx, this.config);
            this.chart.canvas.parentNode.style.height = '100%';
            this.chart.canvas.parentNode.style.width = '100%';
        }).catch(error => {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error loading ChartJS',
                    message: error.message,
                    variant: 'error',
                }),
            );
        });
    }

}

What am I doing wrong?  Thank you