2amigos / yii2-chartjs-widget

ChartJs Widget For Yii2
https://2amigos.us
Other
108 stars 69 forks source link

Configuring options for multiple datasets #47

Open wilblack opened 4 years ago

wilblack commented 4 years ago

Hi, thanks for your plugin. I am having some problems configuring my chart options. I am doing a chart with multiple datasets. The first is a bar chart and then on each bar I need to display a data point, see attached image. I display the points as the second dataset with 'type' => 'line'. The problem i am having is that I want to configure the line dataset differently than the bar chart, specifically I want to disable tooltips for the bar chart and only enable them for the line chart. I can disable for both using `clientOptions' but I can't seem to disable them individually. See example below. Any suggestions on configuring options for multiple datasets?

'type' => 'bar',
        'options' => [
            'height' => 400,
            'width' => 400
        ],
        'clientOptions' => [
            'title' => [
                'display' => true,
                'fontColor' => $domain->primary_color,
                'fontSize' => 20,
                'text' => $domain->name,
                'position' => 'top'
            ],
            'legend' => [
                'display' => false,
                'position' => 'bottom'
            ],
            'scales' => [
                'yAxes' => [[
                    'ticks' => [
                        'min' => 0,
                        'suggestedMax' => 5
                    ]]
                ]
            ],
            'tooltips' => [  
                    'enabled' => true // <-- This works, but for both datasets   
            ]
        ],
        'data' => [
            'labels' => $labels,
            'datasets' => [
                [
                    'label' => "Bar Chart label",
                    'backgroundColor' => $domain->barColor(),
                    'borderColor' => $domain['primary_color'],
                    'pointBackgroundColor' => "rgba(179,181,198,1)",
                    'pointBorderColor' => "#fff",
                    'pointHoverBackgroundColor' => "#fff",
                    'pointHoverBorderColor' => "rgba(179,181,198,1)",
                    'data' => $data,
                    'tooltips' => [  
                        'enabled' => true // <-- This works, but for both datasets   
                    ]
                ],
                [
                    'label' => 'Marker label',
                    'type' => 'line',
                    'data' => $markers,
                    'pointRadius' => 6,
                    'showLine' => false,
                    'pointStyle' => 'point',
                    'pointBackgroundColor' => "rgb(0,0,0)",
                    'tooltips' => [
                        'enabled' => true // When I try to set options here they don't take effect
                    ]
                ]
            ]
        ]

This is what I am trying to achieve. Screen Shot 2020-04-07 at 11 45 45 AM

What I got so far, the tooltip does not line up with the point and it show both the labels, I just want the Marker label and it to only appear when hovering over the marker.

Screen Shot 2020-04-07 at 11 47 01 AM