Charting

Use it in an item

Map the tag to an exact package version and match the model ID to the markup. The item player loads the views. You can use any frontend framework.

{
  "elements": {
    "charting": "@pie-element/charting@13.0.4"
  },
  "markup": "<charting id=\"example\"></charting>",
  "models": [
    {
      "id": "example",
      "element": "charting",
      "chartType": "bar",
      "title": "Class Test Score Distribution",
      "prompt": "<p><strong>Data Analysis:</strong> The bar chart shows test scores for five students. Student C scored 15 points less than the class average of 85. Update the chart to show the correct score for Student C.</p><p>You can also add additional students if needed.</p>",
      "promptEnabled": true,
      "teacherInstructions": "<p><strong>Scoring:</strong> Student C should have a score of 70 (85 - 15 = 70). Award full credit if students correctly calculate and enter 70 for Student C.</p>",
      "teacherInstructionsEnabled": true,
      "addCategoryEnabled": true,
      "changeInteractiveEnabled": true,
      "changeEditableEnabled": true,
      "changeAddCategoryEnabled": true,
      "studentNewCategoryDefaultLabel": "New Student",
      "data": [
        {
          "label": "Student A",
          "value": 95,
          "interactive": false,
          "editable": false
        },
        {
          "label": "Student B",
          "value": 88,
          "interactive": false,
          "editable": false
        },
        {
          "label": "Student C",
          "value": 75,
          "interactive": true,
          "editable": false
        },
        {
          "label": "Student D",
          "value": 82,
          "interactive": false,
          "editable": false
        },
        {
          "label": "Student E",
          "value": 90,
          "interactive": false,
          "editable": false
        }
      ],
      "correctAnswer": {
        "data": [
          {
            "label": "Student A",
            "value": 95
          },
          {
            "label": "Student B",
            "value": 88
          },
          {
            "label": "Student C",
            "value": 70
          },
          {
            "label": "Student D",
            "value": 82
          },
          {
            "label": "Student E",
            "value": 90
          }
        ]
      },
      "domain": {
        "label": "Students"
      },
      "range": {
        "label": "Test Scores",
        "min": 0,
        "max": 100,
        "labelStep": 10
      },
      "graph": {
        "width": 480,
        "height": 480
      },
      "scoringType": "partial scoring",
      "rationale": "<p>Student C's score should be 70 because the class average is 85 and Student C scored 15 points less: 85 - 15 = 70.</p>",
      "rationaleEnabled": true,
      "rubricEnabled": false
    }
  ]
}

Embed an item · Embed authoring · Print integration

Responses and scoring

The controller defines scoring for this element. Browser scoring returns one outcome per element. Your application combines those outcomes into an item score and handles trusted server scoring.

Scoring, partial credit and rubrics →

Model, configuration and session reference

The model holds content, configuration controls the editor, and the session holds the response. Fields below come from generated JSON Schemas.

Schema version: @pie-element/charting@13.0.6. Example version: 13.0.4. Use the schema matching your content. Schema checks cover data structure; controller validation checks authoring rules.

How to use the schemas →

Accessibility and content requirements

PIE targets WCAG 2.2 AA. Provide clear prompts and media alternatives, and test the question with a keyboard and assistive technology. Manual testing is still incomplete; see the coverage notes below.

Accessibility and evidence · Element evidence and manual checks(opens in new tab)