1. Canvas Components
  2. ChartJS Component

Canvas Components

ChartJS Component

Explains the Chart.js canvas component for hosted Webchat. Useful for interactive charts, graphs, analytics, and visual summaries in chat.

The ChartJS component displays interactive charts and graphs in the webchat interface, using the Chart.js library for 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 configuration options, see the Chart.js documentation.