# ChartJS

{% hint style="info" %}
For this content, the panel frame url\_name must be **frame\_chartjs**, and it must have a type (e.g. **combo\_double\_y\_axis**).

```python
{
    'title': 'Performance',
    'width': 12,
    'height': 450,
    'full_row': True,
    'type': 'combo_double_y_axis',
    'url_name': 'frame_chartjs',
    'url_action_name': 'panel_delivery_report_monthly_otp_autoform',
    ...
```

{% endhint %}

The content has the following attributes and possible panel type values (defined at the panel level, not the content level):

* **view** with possible values:
  * **api\_views.ChartJSAPIPie** for pie charts, with required panel type **pie**
  * **api\_views.ChartJSAPILine** for line charts
  * **api\_views.ChartJSAPIBar** for bar charts, with possible panel types **bar** (vertical bars) or **horizontalBar** (horizontal bars). The panel attribute **stacked\_chart** can be set to False to avoid stacking the bars if the grouping has more than one field.
  * **api\_views.ChartJSAPIBarDaily** for bar charts with datetime values converted into date values
  * **api\_views.ChartJSAPIRadar** for radar charts with required panel type **radar** 

```python
{
    "title": "Monthly OTP",
    "width": 12,
    "height": 565,
    "row_start": True,
    "type": "combo_double_y_axis",
    "url_name": "frame_chartjs",
    "url_action_name": "panel_scorecard_monthly_otp",
    "content": {
        'view': custom_views.ChartJSAPIComboOTP,
        'url_params_list': [
            None,
            {'group_by': 'vendor__name'},
            {'group_by': 'ready_d_month__year_month_name_short'},
        ],
        'view_params': {
            'label_quantity': 'Shipped Quantity (units)',
            'month_field': 'ready_d_month',
            'model': custom_models.Delivery,
            'decimal_rounding': 4,
            'limit': 15,
            'order_by': '-annotation',
            'aggregations': [
                {'function': 'Sum', 'value': 'ready_quantity'},
                {'function': 'Custom', 'value': Cast(Sum('ontime_quantity'), FloatField())/Cast(Sum('ready_quantity'), FloatField())},
            ],
            'include_filters_extra': {
                'monitor__isnull': False,
                'ready_quantity__gt': 0,
            }
        },
    }
}
```

<figure><img src="https://3317070279-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F21lWxRGfp98mDu2HVXvf%2Fuploads%2FkdsvLOichjVJzAhAL28D%2Fimage.png?alt=media&#x26;token=54d4e94d-e4ba-40c9-a79e-c5fbe1c8b00f" alt=""><figcaption></figcaption></figure>