Chart not showing on view screen

[aagge]

Hi,

My chart is not showing on my view screen. There is a space where the chart should show but it doesn't.

In my script I also have a Highchart chart working.

• Andrew

<?php

use yii\helpers\Html;
use dosamigos\chartjs\ChartJs;
use miloschuman\highcharts\Highcharts;

?>

<div class="contract-index">
    <?= Highcharts::widget([
            'options' => [
                'chart' => ['type' => 'bar'],
               'title' => ['text' => 'Fruit Consumption'],
               'xAxis' => [
                  'categories' => ['Apples', 'Bananas', 'Oranges']
               ],
               'yAxis' => [
                  'title' => ['text' => 'Fruit eaten']
               ],
               'series' => [
                  ['name' => 'Jane', 'data' => [1, 0, 4]],
                  ['name' => 'John', 'data' => [5, 7, 3]]
               ]
            ]
    ]); ?>   

    <?= ChartJs::widget([ 'type' => 'Line', 'options' => 
                        [ 'height' => 400, 'width' => 400 ], 
                        'data' => 
                            [ 'labels' => ["January", "February", "March", "April", "May", "June", "July"], 
                                'datasets' => [ 
                                    [   'fillColor' => "rgba(220,220,220,0.5)", 
                                        'strokeColor' => "rgba(220,220,220,1)", 
                                        'pointColor' => "rgba(220,220,220,1)", 
                                        'pointStrokeColor' => "#fff", 'data' => [65, 59, 90, 81, 56, 55, 40] ], 
                                    [ 'fillColor' => "rgba(151,187,205,0.5)", 
                                      'strokeColor' => "rgba(151,187,205,1)", 
                                      'pointColor' => "rgba(151,187,205,1)", 
                                      'pointStrokeColor' => "#fff", 
                                      'data' => [28, 48, 40, 19, 96, 27, 100] 
                                    ] 

                                ] 
                            ] 
                        ]); ?>     
</div>

[tonydspaniard]

@aagge do you mind trying with this?

<?= ChartJs::widget([
    'type' => 'line',
    'options' => [
        'height' => 400,
        'width' => 400
    ],
    datasets:
    [
        {
            label:
            "My First dataset",
            backgroundColor: "rgba(179,181,198,0.2)",
            borderColor: "rgba(179,181,198,1)",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(179,181,198,1)",
            data: [65, 59, 90, 81, 56, 55, 40]
        },
        {
            label:
            "My Second dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            pointBackgroundColor: "rgba(255,99,132,1)",
            pointBorderColor: "#fff",
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "rgba(255,99,132,1)",
            data: [28, 48, 40, 19, 96, 27, 100]
        }
    ]
]);
?>

Also, what is the chrome development console shows? any issues there?

[aagge]

When using my original code I get the following:

Also the code you sent to my has a syntax error by datasets.

[tonydspaniard]

@aagge thats strange... what version are you using?

[tonydspaniard]

@aagge use this https://github.com/2amigos/yii2-chartjs-widget/issues/22#issuecomment-264306591

My code was simply copy paste from JS.

[wa1kb0y]

I have the same issue today, after composer update. I solve the problem change type value to lower case like this: 'type' => 'Line' to 'type' => 'line'