How to use Highcharts in JavaScript and make dynamic charts using JSON data

charts javascript json

Last updated: 27th November 2024

Below is a demo showing how to use HighCharts API to create dynamic and interactive charts in JavaScript. You can see 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] }
]

Now, 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