Tutorials

JavaScript chart examples using Highcharts

by

Highsoft

8 minutes read

Data visualization plays a critical role in understanding complex data sets, and JavaScript is one of the most popular languages used to create dynamic, interactive charts on the web.

Highcharts is a leading JavaScript charting library that offers a wide range of chart types and customization options, making it easier to present data in a visually appealing and insightful manner.

In this blog post, we’ll explore various JavaScript chart examples using Highcharts. Whether you’re a developer working with JavaScript, .NET, React or other common frameworks, we’re confident you’ll find the inspiration you need.

Highcharts also integrates seamlessly with popular languages such as Python, R, PHP and Java, as well as mobile platforms like iOS and Android. Additional support for frameworks like Svelte, Angular, and Vue, makes it a versatile tool for various development environments.

To see more examples and get an even better understanding of the opportunities Highcharts offers, please head over to the demo section of our website or read up on the technical documentation on how to get started. Once you get the hang of it, the API reference will help you customize your charts in no time.

Why use Highcharts for JavaScript charts?

Before diving into the examples, it’s important to understand why Highcharts is a preferred choice for JavaScript charting:

Ease of use: Highcharts offers a simple API that allows developers to create complex charts with minimal coding.
Extensive documentation: Highcharts provides comprehensive documentation and numerous examples, making it easier for developers to implement.
Customization: The library offers extensive customization options, enabling you to create charts that align with your brand or project requirements.
Cross-browser compatibility: Highcharts charts are compatible across different browsers and devices, ensuring a consistent experience for all users.
Accessibility: Highcharts has built-in features that make charts accessible to users with disabilities, aligning with modern accessibility standards.

Chart examples

Now, let’s explore some practical JavaScript chart examples using Highcharts.

For each chart type, we’ll discuss its typical use cases and link to an example from the Highcharts demo section.

Column chart

The basic column chart is one of the most frequently used chart types for comparing data across categories. It displays data using vertical bars, making it easy to compare values at a glance. Column charts are particularly useful for showing trends over time or comparing different items in a dataset. For example, you might use a column chart to display monthly sales figures, average rainfall in different cities or estimated production for a specific period.

The Highcharts column chart example below compares the estimated production of corn and wheat in 2023 across six countries: USA, China, Brazil, EU, Argentina, and India. The chart uses vertical bars to represent the production values in thousands of metric tons. Corn and wheat are displayed as separate series, with the USA and China showing the highest production for corn and wheat, respectively. The chart is interactive, allowing users to hover over the columns for detailed tooltip information.

Go to the demo page for “Corn vs wheat estimated production for 2023” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

Pie chart

A pie chart is an excellent tool for showing the proportion of different parts within a whole. It divides a circle into segments that represent each category’s contribution to the total. Pie charts are most effective when you have a small number of categories, and you want to show how they relate to one another as parts of a whole. One common use case for a pie chart is displaying the market share of different companies within an industry.

Another example is the pie chart example below that shows the composition of an egg yolk. It uses a pie chart to visualize the percentages of different components: Water (55.02%), Fat (26.71%), Protein (15.5%), Ash (1.68%), and Carbohydrates (1.09%). The “Fat” slice is highlighted by being “sliced out” from the rest of the pie, indicating its importance or focus. This chart is interactive, allowing users to hover over each section to view detailed information in tooltips.

Go to the demo page for “Egg Yolk Composition” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

Line chart

Line charts are ideal for visualizing data trends over time. They connect individual data points with a straight line, making it easy to see how values change between points. Line charts are commonly used in financial data visualization, such as stock price movements, or in any scenario where it’s important to track changes over a continuous period.

The Highcharts line chart example below depicts U.S. solar employment growth from 2010 to 2022, segmented by job categories such as Installation & Developers, Manufacturing, Sales & Distribution, Operations & Maintenance, and Other. Each category is represented by a separate line, showing trends over time. The chart highlights the significant growth in the Installation & Developers category, while other segments show more moderate changes. The chart is interactive, allowing users to hover over data points for detailed information.

Go to the demo page for “U.S Solar Employment Growth” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

Area chart

An area chart is similar to a line chart but with the area beneath the line filled in. This filling highlights the magnitude of the trend more clearly, making area charts suitable for visualizing cumulative values over time. Area charts are often used to display metrics such as revenue growth, population changes, or any other data where the focus is on the volume represented by the trend line.

The chart area chart example below “US and USSR nuclear stockpiles” compares the nuclear stockpiles of the USA and USSR/Russia from 1945 to 2024. It uses an area chart to show the growth and decline of nuclear weapons in both countries over time. The chart reveals significant stockpile increases during the Cold War, followed by reductions after the 1980s. The chart is interactive, allowing users to explore specific data points for each year.

Go to the demo page for “US and USSR nuclear stockpiles” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

Bar chart

Bar charts are similar to column charts, but they display data using horizontal bars instead of vertical ones. This format can be more effective when you have long category names or when comparing a large number of items. Bar charts are often used in surveys, demographic studies, or any situation where you’re comparing different groups or categories.

The “Historic World Population by Region” uses horizontal bars to represent the world population for each region.

Go to the demo page for “Historic World Population by Region” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

Scatter chart

Scatter charts are used to display relationships between two numerical variables. Each point on the scatter chart represents a data point, plotted along two axes. This type of chart is useful for identifying correlations, clusters, and outliers within a dataset. Scatter charts are commonly employed in scientific research, financial analysis, and any scenario where understanding the relationship between two variables is crucial.

The scatter chart example below “Scatter chart with jitter” displays a scatter plot with jittering, which adds slight randomization to the position of each data point. This technique is particularly useful when data points overlap, making it easier to visualize the density and distribution of points. The chart includes basic interactive features like tooltips that show the exact values when hovering over points. The plot is color-coded by category, and it is accompanied by clear axes and labels for easy interpretation.

Go to the demo page for “Scatter chart with jitter” to view its code, play around with different theme colors or edit it on JSFiddle or Codepen.

Conclusion and additional resources

In summary, Highcharts is a versatile tool that makes it easy to create a wide range of interactive charts in JavaScript. From simple line and column charts to more complex visualizations, Highcharts offers robust customization options that allow developers to tailor charts to their specific needs. Its user-friendly interface and detailed documentation make it accessible for developers at any level, while its flexibility ensures it can handle both basic and advanced data visualization tasks.

For more information and to explore the capabilities of Highcharts®, visit the Highcharts demo section and the technical documentation.