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": [
            "#1dceff",
            "#a6c40f",
            "#df79ff",
            "#ff9f8e",
            "#00b797",
            "#5e9bff"
          ],
          "borderColor": [
            "rgba(29,206,255,0.5)",
            "rgba(166,196,23,0.5)",
            "rgba(223,121,255,0.5)",
            "rgba(255,159,143,0.5)",
            "rgba(0,183,152,0.5)",
            "rgba(94,155,255,0.5)"
          ]
        }
      ]
    }
  },
  "mask": 0
}
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": [
            "#1dceff",
            "#a6c40f",
            "#df79ff",
            "#ff9f8e",
            "#00b797",
            "#5e9bff"
          ],
          "borderColor": [
            "rgba(29,206,255,0.5)",
            "rgba(166,196,23,0.5)",
            "rgba(223,121,255,0.5)",
            "rgba(255,159,143,0.5)",
            "rgba(0,183,152,0.5)",
            "rgba(94,155,255,0.5)"
          ]
        }
      ]
    }
  },
  "mask": 0
}
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": [
            "#1dceff",
            "#a6c40f",
            "#df79ff",
            "#ff9f8e",
            "#00b797",
            "#5e9bff"
          ],
          "borderColor": [
            "rgba(29,206,255,0.5)",
            "rgba(166,196,23,0.5)",
            "rgba(223,121,255,0.5)",
            "rgba(255,159,143,0.5)",
            "rgba(0,183,152,0.5)",
            "rgba(94,155,255,0.5)"
          ]
        }
      ]
    }
  },
  "mask": 0
}
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": [
            "#1dceff",
            "#a6c40f",
            "#df79ff",
            "#ff9f8e",
            "#00b797",
            "#5e9bff"
          ],
          "borderColor": [
            "rgba(29,206,255,0.5)",
            "rgba(166,196,23,0.5)",
            "rgba(223,121,255,0.5)",
            "rgba(255,159,143,0.5)",
            "rgba(0,183,152,0.5)",
            "rgba(94,155,255,0.5)"
          ]
        }
      ]
    }
  },
  "mask": 0
}
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": [
            "#1dceff",
            "#a6c40f",
            "#df79ff",
            "#ff9f8e",
            "#00b797",
            "#5e9bff"
          ],
          "borderColor": [
            "rgba(29,206,255,0.5)",
            "rgba(166,196,23,0.5)",
            "rgba(223,121,255,0.5)",
            "rgba(255,159,143,0.5)",
            "rgba(0,183,152,0.5)",
            "rgba(94,155,255,0.5)"
          ]
        }
      ]
    }
  },
  "mask": 0
}
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": [
            "#1dceff",
            "#a6c40f",
            "#df79ff",
            "#ff9f8e",
            "#00b797",
            "#5e9bff"
          ],
          "borderColor": [
            "rgba(29,206,255,0.5)",
            "rgba(166,196,23,0.5)",
            "rgba(223,121,255,0.5)",
            "rgba(255,159,143,0.5)",
            "rgba(0,183,152,0.5)",
            "rgba(94,155,255,0.5)"
          ]
        }
      ]
    }
  },
  "mask": 0
}
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": [
            "#1dceff",
            "#a6c40f",
            "#df79ff",
            "#ff9f8e",
            "#00b797",
            "#5e9bff"
          ],
          "borderColor": [
            "rgba(29,206,255,0.5)",
            "rgba(166,196,23,0.5)",
            "rgba(223,121,255,0.5)",
            "rgba(255,159,143,0.5)",
            "rgba(0,183,152,0.5)",
            "rgba(94,155,255,0.5)"
          ]
        }
      ]
    }
  },
  "mask": 0
}
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": [
            "#1dceff",
            "#a6c40f",
            "#df79ff",
            "#ff9f8e",
            "#00b797",
            "#5e9bff"
          ],
          "borderColor": [
            "rgba(29,206,255,0.5)",
            "rgba(166,196,23,0.5)",
            "rgba(223,121,255,0.5)",
            "rgba(255,159,143,0.5)",
            "rgba(0,183,152,0.5)",
            "rgba(94,155,255,0.5)"
          ]
        }
      ]
    }
  },
  "mask": 0
}