Type doughnut & options

[peresz]

After upgrade chartjs to latest version I have problem with defining width and height of chart.

$chart = ChartJs::widget([ 'type' => 'doughnut', 'options' => [ 'id' => 'cstat', 'cutoutPercentage' => 25, 'legend' => [ 'display' => false], 'height' => 150, 'width' => 150 ], 'data' => $dt, ]);

I see that options: cutoutPercentage, height, width not works. Is there any problems or I have to do it in other way?

[peresz]

I've found solution, here result:

$chart = ChartJs::widget([
        'type' => 'doughnut',
        'options' => [
                'id' => 'cstat',
                'width' => 155,
                'height' => 155,
        ],
        '**clientOptions**' => [
                'responsive' => false,
                'legend' => [ 'display'=> false ],
                'cutoutPercentage' => 45,
                'animation' => [
                        'animateRotate' => false,
                        'animateScale' => true,
                        'duration' => 369,
                ],
        ],
        'data' => $dt,
]);

[tonydspaniard]

Thanks @peresz

[razoramon]

Thanks for the great code 2amigos and all. I was not able to find a suitable sample in the docs so here is mine :

<?= ChartJs::widget([
    'type' => 'line',
    'data' => [
        'labels' => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        'datasets' => [
            [
                'label' => 'level',
                'data' => [0, 1, 2, 3, 4, 6, 5, 12 , 17, 50, 100],
            ]
        ],
    ],
    'options' => [
        'height' => 200,
        'width' => 500,
    ],
    'clientOptions' => [
        'title' => [
            'display' => true,
            'text' => 'Chart from the absolute beginner: definitive edition (remastered)'            
        ],
        'scales' => [
                'yAxes' => [
                    [
                        'scaleLabel' => [
                            'display' => 'true',
                            'labelString' => 'level'
                        ]
                    ]
                ],
                'xAxes' => [
                    [
                        'scaleLabel' => [
                            'display' => 'true',
                            'labelString' => 'time spent'
                        ]
                    ]
                ]
        ],
    ]
]);?>

I cannot stress enough to take very close attention to brackets and which array to put in the options: clientOptions[] or options[].

Thank you for the cool widget. Keep up the good work !

[tonydspaniard]

@razoramon Thanks... I'll update the widget soon and its docs.

[shashanbk]

Hi I am stuck here can you please help me out ??

<?php echo ChartJs::widget([
    'type' => 'pie',
    'data' => [
        'labels' => ["test","test1","test2","Test3"],

        'datasets' => [
            [
                'label' => 'level',
                'data' => [10,20,30,40],
                'backgroundColor' => "blue",

            ],
        ],
    ],
    'options' => [
        'height' => 200,
        'width' => 500,
    ],

]);?>

Here how can i set separate color for every parts test, test1, test2, test3 respectively green,yellow,blue and red ??

[razoramon]

Hey there,

'backgroundColor' => ['blue', 'red', 'yellow', 'green'],

I must admit that is not so evident.

Hope this helps.

[shashanbk]

Hey there,

Thank you for your help :)

Thanks again.

On Fri, Dec 8, 2017 at 7:36 PM, razoramon notifications@github.com wrote:

Hey there,

'backgroundColor' => ['blue', 'red', 'yellow', 'green'],

I must admit that is not so evident.

Hope this helps.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/2amigos/yii2-chartjs-widget/issues/19#issuecomment-350271119, or mute the thread https://github.com/notifications/unsubscribe-auth/AE957VtBppwSPV2J4r9k696LEag6s9Zoks5s-UKAgaJpZM4JU5tQ .

shashank shah

[compugator2]

Is there a way to show the values of bar graph bars directly on the chart? I need to do this for printout purposes.

[cosoftmoh]

`'datasets' => [ [ 'label' => 'level', 'data' =>$recurance_reservation , 'backgroundColor' => ['blue', 'red', 'yellow', 'green','Brown','DarkMagenta','GreenYellow','Violet','DodgerBlue','Tomato','Orange','MediumSeaGreen','SlateBlue','DarkViolet ','DarkSlateGrey','blak'],

        ],
    ],`