1. Canvas Components
  2. ChartJS Component

Canvas Components

ChartJS Component

The ChartJS component allows you to display interactive charts and graphs within the webchat interface. This component leverages the popular Chart.js library for flexible data visualization.

Example Usage

        {
  "webchat_server_control_event": {
    "platforms": {
      "webchat": {
        "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
        "webchat_control_event": {
          "action": "render_component",
          "params": {
            "component_type": "chartjs",
            "component_params": {
              "type": "bar",
              "data": {
                "labels": [
                  "Red",
                  "Blue",
                  "Yellow",
                  "Green",
                  "Purple",
                  "Orange"
                ],
                "datasets": [
                  {
                    "label": "# of Votes",
                    "data": [
                      12,
                      19,
                      3,
                      5,
                      2,
                      3
                    ],
                    "borderWidth": 1
                  }
                ]
              },
              "options": {
                "scales": {
                  "y": {
                    "beginAtZero": true
                  }
                }
              }
            }
          }
        },
        "stubsession": {
          "set_new_with_timeout_hours": 24
        }
      }
    },
    "name": "webchat_server_control_event",
    "__key": "webchat_server_control_event",
    "help": "",
    "conditions": [],
    "send_to": {},
    "__order": 0
  }
}

      

Chart Types

The ChartJS component supports various chart types:

  • bar - Bar charts
  • line - Line charts
  • pie - Pie charts
  • doughnut - Doughnut charts
  • radar - Radar charts
  • And more

Configuration

  • type - The chart type to display
  • data - Chart data configuration with labels and datasets
  • options - Chart options for customization (scales, colors, etc.)

For more detailed configuration options, refer to the Chart.js documentation.