React Google Pie Chart Styling the Title

Question

I am trying to use google react pie chart however I am having a hard time position the title.

Here is my code:

const pieOptions = {
    title: 'my awesome chart',
    pieHole: 0.6,
    slices: [
        {
            color: '#00a3e0',
        },
        {
            color: '#f2a900',
        },
        {
            color: 'F16A21',
        },
        {
            color: '#e9a227',
        },
    ],
    legend: {
        position: 'right',
        alignment: 'center',
        textStyle: {
            color: '233238',
            fontSize: 14,
        },
    },
    tooltip: {
        showColorCode: true,
    },
    // chartArea: {
    //     left: 0,
    //     top: 0,
    //     width: '100%',
    //     height: '70%',
    // },
    fontName: 'Roboto',
    fontSize: 20,
}

<Chart
                chartType="PieChart"
                data={[
                    ['Item', 'Numbers'],
                    ['Item 1', 5000],
                    ['Item 2', 20000],
                    ['Item 3', 6000],
                ]}
                options={pieOptions}
                graph_id="PieChart"
                width={'100%'}
                height={'220px'}
                legend_toggle
            />

Here is what I get:

My desired result is to put the title above the legend but I am clueless how to do so.

Here is a link to the npm package I am using:

https://github.com/RakanNimer/react-google-charts#donut-chart https://github.com/rakannimer/react-google-charts/blob/master/sandboxes/pie-chart/index.js

Answer 1

It doesn't seem that there is a way to position the title. You'll have to set titlePosition: 'none' and create a title separately and style it how you want instead.

Read more at the docs.