Last updated: 27th May 2026
Below is a demo showing how to use HighCharts API to create dynamic and interactive charts in JavaScript. You can read the tutorial here.The sample JSON data. You can edit the below JSON array and create a new chart.
[
{ "name": "arun", "data": [21, 17, 14] },
{ "name": "king", "data": [32, 13, 15] },
{ "name": "james", "data": [19, 5, 31] }
]Select a Chart Type from the dropdown list and click the button to create a new chart using the above JSON data.
Note: You can export the chart by selecting an option from the menu.
• Hover mouse over the series in the chart to see the tooltip.
• Hover mouse over category (arun, king or james) to view data for a particular sales person.
Go back to the Tutorial
More interesting and interactive Demos
📖 Read Next
- How to Populate a SELECT Dropdown with JSON Data using JavaScript - Two Simple Examples
- Build HTML Table from JSON Using Async/Await
- Create Dynamic Tables with JavaScript & Save Data Like a Pro
- Build a Simple CRUD App with Vanilla JavaScript
- Lightweight JavaScript Bot 🤖 Detection Script
- Create animated column Charts using Highcharts API with data extracted from JSON file
- 🚀 Ready to code? Try the Online JavaScript Editor or Compress HTML and CSS instantly for faster load times using our 📦 HTML Minifier.
