reactjschart.jsreact-chartjs-2react-chartist

Align Title Left React Chart.js V2

I'm trying to align the title to the left instead of the center (shown in the image).

I know this is possible on chartJS v3.0.0-alpha.2, but reactchartjs only goes up to 2.9.30 as far as I know.

Does anyone know how to achieve this in reactchartjs?

I thought it would be something like:

options={{
      title: {
        position: 'top',
        align: 'left',
      },
    }}

Any help would be appreciated.

Display of graph

Solution

  • You should use the align parameter. This sets the alignment of the title. Your options are:

    Your align: 'left' isn't one of the above and will not have any effect. Setting align: 'start' however will give you exactly what you want:

    enter image description here

    The full code looks like this:

    <Chart 
    type='line' 
    data={dat} 
    options={{
        plugins: {
            title: {
                display: true,
                align: 'start',
                text: 'Bitcoin Mining Difficulty'
            }
        }
    }} />

    Let me also mention that you should not confuse that with position: 'left'. position moves the whole title into one of top, left, bottom, right area of the chart. An example with a combination of position: 'left' and align: start:

    enter image description here