PieChart not rendering

[lcardito]

Hey guys,

Firstly thanks for this work. Much appreciated.

I easily managed to display a Line chart without any issue. However within the same project I am trying to display a Pie chart but the canvas comes out empty when using css to set the width and height of the canvas it self.

import React from 'react';
const PieChart = require("react-chartjs").Pie;

class Example extends React.Component {
    constructor() {
        super();
    }

    render() {
        let data = [
            {color: "blue", label: "test1", value: 1},
            {color: "red", label: "test2", value: 2}
        ];

        return (
            <PieChart data={data} options={{animateRotate: true}}/>
        )
    }
}

export default Example;

The css:

canvas{
    width: 100% !important;
    height: auto !important;
}

The html generated:

<canvas height="300" width="600" style="width: 300px; height: 150px;"></canvas>

Am I doing something wrong or is there something to fix?

Cheers!

[pankaj805]

@lcardito If i may make a suggestion .. If you want your chart to be of a particular size.. why don't you wrap it inside a div. Give some dimension to the div and render the chart with responsive property as true

[lcardito]

@pankaj805 thanks for the hint. The css trick I've tried works fine for a LineChart hence my question. Anyway I ended up moving to plain Chart.js without this wrapper.

Thanks!

[davideghz]

I have the same issue. I can successfully render a Line and Bar Chart, but I can't manage to display a Doughnut Chart.. code I use for Doughnut is exactly the same I use for Line/Bar, and I don't get any error in console.

import React from 'react';
import { Doughnut } from 'react-chartjs';

export class DoughnutChart extends React.Component {

    render() {

        const data = {
            labels: [
                "Red",
                "Blue",
                "Yellow"
            ],
            datasets: [
                {
                    data: [300, 50, 100],
                    backgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ],
                    hoverBackgroundColor: [
                        "#FF6384",
                        "#36A2EB",
                        "#FFCE56"
                    ]
                }]
        };

        const options = {
            animation: {
                animateScale: true
            }
        };

        return <Doughnut data={data} options={options} width="600" height="250"/>
    }
}

any clue?

[davideghz]

Switched to https://github.com/gor181/react-chartjs-2 that works like a charm with chartjs 2.4+

[Jareechang]

Please see Documentation for Chart.js 1.1.1 in README. This is working for me. Closing issue.

import React from 'react';
import { Pie } from 'react-chartjs';

class renderChart {
    render() {
        const pieData = [
            {
                value: 300,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#46BFBD",
                highlight: "#5AD3D1",
                label: "Green"
            },
            {
                value: 100,
                color: "#FDB45C",
                highlight: "#FFC870",
                label: "Yellow"
            }
        ];
        return <Pie data={pieData} />;
    }
}