Home·Apps·Sample Chart JS

Basic ChartJS sample tests rendered from a Java API.

LINE Chart Test
JSON
{
  "chart": {
    "type": "line",
    "data": {
      "labels": [
        "Red",
        "Blue",
        "Yellow",
        "Green",
        "Purple",
        "Orange"
      ],
      "datasets": [
        {
          "label": "# Count",
          "data": [
            12,
            20,
            3,
            5,
            2,
            3
          ],
          "backgroundColor": [
            "oklch(0.798 0.154 229.47)",
            "oklch(0.77 0.182 119.959)",
            "oklch(0.743 0.213 316.506)",
            "oklch(0.825 0.145 29.902)",
            "oklch(0.694 0.137 174.121)",
            "oklch(0.705 0.183 261.989)"
          ],
          "borderColor": [
            "oklch(0.792 0.144 223.753 / 0.502)",
            "oklch(0.771 0.181 120.237 / 0.502)",
            "oklch(0.74 0.208 317.565 / 0.502)",
            "oklch(0.796 0.118 30.713 / 0.502)",
            "oklch(0.695 0.132 174.181 / 0.502)",
            "oklch(0.694 0.161 259.792 / 0.502)"
          ]
        }
      ]
    }
  }
}
BAR Chart Test
JSON
{
  "chart": {
    "type": "bar",
    "data": {
      "labels": [
        "Red",
        "Blue",
        "Yellow",
        "Green",
        "Purple",
        "Orange"
      ],
      "datasets": [
        {
          "label": "# Count",
          "data": [
            12,
            20,
            3,
            5,
            2,
            3
          ],
          "backgroundColor": [
            "oklch(0.798 0.154 229.47)",
            "oklch(0.77 0.182 119.959)",
            "oklch(0.743 0.213 316.506)",
            "oklch(0.825 0.145 29.902)",
            "oklch(0.694 0.137 174.121)",
            "oklch(0.705 0.183 261.989)"
          ],
          "borderColor": [
            "oklch(0.792 0.144 223.753 / 0.502)",
            "oklch(0.771 0.181 120.237 / 0.502)",
            "oklch(0.74 0.208 317.565 / 0.502)",
            "oklch(0.796 0.118 30.713 / 0.502)",
            "oklch(0.695 0.132 174.181 / 0.502)",
            "oklch(0.694 0.161 259.792 / 0.502)"
          ]
        }
      ]
    }
  }
}
RADAR Chart Test
JSON
{
  "chart": {
    "type": "radar",
    "data": {
      "labels": [
        "Red",
        "Blue",
        "Yellow",
        "Green",
        "Purple",
        "Orange"
      ],
      "datasets": [
        {
          "label": "# Count",
          "data": [
            12,
            20,
            3,
            5,
            2,
            3
          ],
          "backgroundColor": [
            "oklch(0.798 0.154 229.47)",
            "oklch(0.77 0.182 119.959)",
            "oklch(0.743 0.213 316.506)",
            "oklch(0.825 0.145 29.902)",
            "oklch(0.694 0.137 174.121)",
            "oklch(0.705 0.183 261.989)"
          ],
          "borderColor": [
            "oklch(0.792 0.144 223.753 / 0.502)",
            "oklch(0.771 0.181 120.237 / 0.502)",
            "oklch(0.74 0.208 317.565 / 0.502)",
            "oklch(0.796 0.118 30.713 / 0.502)",
            "oklch(0.695 0.132 174.181 / 0.502)",
            "oklch(0.694 0.161 259.792 / 0.502)"
          ]
        }
      ]
    }
  }
}
PIE Chart Test
JSON
{
  "chart": {
    "type": "pie",
    "data": {
      "labels": [
        "Red",
        "Blue",
        "Yellow",
        "Green",
        "Purple",
        "Orange"
      ],
      "datasets": [
        {
          "label": "# Count",
          "data": [
            12,
            20,
            3,
            5,
            2,
            3
          ],
          "backgroundColor": [
            "oklch(0.798 0.154 229.47)",
            "oklch(0.77 0.182 119.959)",
            "oklch(0.743 0.213 316.506)",
            "oklch(0.825 0.145 29.902)",
            "oklch(0.694 0.137 174.121)",
            "oklch(0.705 0.183 261.989)"
          ],
          "borderColor": [
            "oklch(0.792 0.144 223.753 / 0.502)",
            "oklch(0.771 0.181 120.237 / 0.502)",
            "oklch(0.74 0.208 317.565 / 0.502)",
            "oklch(0.796 0.118 30.713 / 0.502)",
            "oklch(0.695 0.132 174.181 / 0.502)",
            "oklch(0.694 0.161 259.792 / 0.502)"
          ]
        }
      ]
    }
  }
}
DOUGHNUT Chart Test
JSON
{
  "chart": {
    "type": "doughnut",
    "data": {
      "labels": [
        "Red",
        "Blue",
        "Yellow",
        "Green",
        "Purple",
        "Orange"
      ],
      "datasets": [
        {
          "label": "# Count",
          "data": [
            12,
            20,
            3,
            5,
            2,
            3
          ],
          "backgroundColor": [
            "oklch(0.798 0.154 229.47)",
            "oklch(0.77 0.182 119.959)",
            "oklch(0.743 0.213 316.506)",
            "oklch(0.825 0.145 29.902)",
            "oklch(0.694 0.137 174.121)",
            "oklch(0.705 0.183 261.989)"
          ],
          "borderColor": [
            "oklch(0.792 0.144 223.753 / 0.502)",
            "oklch(0.771 0.181 120.237 / 0.502)",
            "oklch(0.74 0.208 317.565 / 0.502)",
            "oklch(0.796 0.118 30.713 / 0.502)",
            "oklch(0.695 0.132 174.181 / 0.502)",
            "oklch(0.694 0.161 259.792 / 0.502)"
          ]
        }
      ]
    }
  }
}
POLARAREA Chart Test
JSON
{
  "chart": {
    "type": "polarArea",
    "data": {
      "labels": [
        "Red",
        "Blue",
        "Yellow",
        "Green",
        "Purple",
        "Orange"
      ],
      "datasets": [
        {
          "label": "# Count",
          "data": [
            12,
            20,
            3,
            5,
            2,
            3
          ],
          "backgroundColor": [
            "oklch(0.798 0.154 229.47)",
            "oklch(0.77 0.182 119.959)",
            "oklch(0.743 0.213 316.506)",
            "oklch(0.825 0.145 29.902)",
            "oklch(0.694 0.137 174.121)",
            "oklch(0.705 0.183 261.989)"
          ],
          "borderColor": [
            "oklch(0.792 0.144 223.753 / 0.502)",
            "oklch(0.771 0.181 120.237 / 0.502)",
            "oklch(0.74 0.208 317.565 / 0.502)",
            "oklch(0.796 0.118 30.713 / 0.502)",
            "oklch(0.695 0.132 174.181 / 0.502)",
            "oklch(0.694 0.161 259.792 / 0.502)"
          ]
        }
      ]
    }
  }
}
BUBBLE Chart Test
JSON
{
  "chart": {
    "type": "bubble",
    "data": {
      "labels": [
        "Red",
        "Blue",
        "Yellow",
        "Green",
        "Purple",
        "Orange"
      ],
      "datasets": [
        {
          "label": "# Count",
          "data": [
            12,
            20,
            3,
            5,
            2,
            3
          ],
          "backgroundColor": [
            "oklch(0.798 0.154 229.47)",
            "oklch(0.77 0.182 119.959)",
            "oklch(0.743 0.213 316.506)",
            "oklch(0.825 0.145 29.902)",
            "oklch(0.694 0.137 174.121)",
            "oklch(0.705 0.183 261.989)"
          ],
          "borderColor": [
            "oklch(0.792 0.144 223.753 / 0.502)",
            "oklch(0.771 0.181 120.237 / 0.502)",
            "oklch(0.74 0.208 317.565 / 0.502)",
            "oklch(0.796 0.118 30.713 / 0.502)",
            "oklch(0.695 0.132 174.181 / 0.502)",
            "oklch(0.694 0.161 259.792 / 0.502)"
          ]
        }
      ]
    }
  }
}
SCATTER Chart Test
JSON
{
  "chart": {
    "type": "scatter",
    "data": {
      "labels": [
        "Red",
        "Blue",
        "Yellow",
        "Green",
        "Purple",
        "Orange"
      ],
      "datasets": [
        {
          "label": "# Count",
          "data": [
            12,
            20,
            3,
            5,
            2,
            3
          ],
          "backgroundColor": [
            "oklch(0.798 0.154 229.47)",
            "oklch(0.77 0.182 119.959)",
            "oklch(0.743 0.213 316.506)",
            "oklch(0.825 0.145 29.902)",
            "oklch(0.694 0.137 174.121)",
            "oklch(0.705 0.183 261.989)"
          ],
          "borderColor": [
            "oklch(0.792 0.144 223.753 / 0.502)",
            "oklch(0.771 0.181 120.237 / 0.502)",
            "oklch(0.74 0.208 317.565 / 0.502)",
            "oklch(0.796 0.118 30.713 / 0.502)",
            "oklch(0.695 0.132 174.181 / 0.502)",
            "oklch(0.694 0.161 259.792 / 0.502)"
          ]
        }
      ]
    }
  }
}