Archive for the JavaScript

Pinch-to-Zoom in Stock Charts — JS Chart Tips

March 5th, 2025 by AnyChart Team

A stock chart with pinch-to-zoom functionality and JavaScript codeStock charts are designed to handle large volumes of time-based data, and smooth navigation is key to working with them effectively. One common need is zooming — whether to focus on a specific time range in greater detail or to get a broader view of the data.

In our JavaScript stock charts, zooming works out of the box through the scroller element, which appears by default as the main navigational UI control, making it easy to adjust the visible range on the go. For even greater flexibility, the range selection UI provides extra tools like preset time period buttons and date input fields. You can also activate zooming via mouse wheel scrolling with the zoomOnMouseWheel() method, which corresponds to the two-finger swipe gesture on touchpads and trackpads.

Pinch-to-zoom is another intuitive zooming option. It allows users to zoom in and out naturally on mobile and touch devices by moving two fingers farther apart or closer together. This is also easy to implement — and it is exactly what we cover in this edition of JS Chart Tips. Learn how to add pinch-to-zoom to your JavaScript stock chart!

Read more »


Quadrant Chart with Custom Image Markers — JS Chart Tips

February 11th, 2025 by AnyChart Team

JavaScript quadrant chart with images as markers, showing its codeDisplaying unique images as markers can add a distinctive touch to your charts, making data visualization more engaging and informative. In this edition of JS Chart Tips, we will guide you through the process of using custom image markers for each data point in a quadrant chart with our JavaScript charting library.

Read more »


20+ Years of Advancing Data Visualization: Interview with Our CEO

February 5th, 2025 by AnyChart Team

A picture of Anton Baranchuk, CEO of AnyChart, featured in Unicorns Journal interview, with the text 'Anton Baranchuk: Empowering Businesses with Cutting-Edge Data Visualization Through AnyChart'Unicorns Journal just published an interview with our CEO and co-founder, Anton Baranchuk, where he reflects on AnyChart’s journey from a small startup to a global leader in data visualization, trusted by enterprises worldwide.

Anton talks about how we got started, the transition from Flash to JavaScript charting, our work with Qlik, and the vision and values that continue to drive us forward.

Read the interview »


Stock Chart with Custom Time Intervals — JS Chart Tips

January 30th, 2025 by AnyChart Team

A custom data grouping time frame interval in a JavaScript stock chart with codeGrouping data points into appropriate time intervals is essential for making stock charts more readable and insightful. While raw data may be collected at a high frequency, such as every minute, financial analysts and traders often need to view broader trends, where grouping data into 5-minute, 15-minute, 1-hour, 1-day, and other time frames can provide clearer insights. In this edition of JS Chart Tips, we will walk you through the process of setting a custom time interval for a stock chart using our JavaScript charting library.

Read more »


Reflecting on 2024 and Embracing 2025 — Happy New Year!

January 9th, 2025 by AnyChart Team

Happy New Year with AnyChartAnother remarkable year is officially in the books! Here at AnyChart, 2024 was a truly rewarding journey marked by innovation and impact:

As we step into 2025, we remain committed to pushing the boundaries of data visualization and analytics, ensuring you always have the tools you need to excel and succeed. Here’s to an even greater year ahead — happy 2025, and stay tuned for what’s coming next!


Integrating AnyChart JS Charts in Python Django Financial Trading Dashboard

December 3rd, 2024 by Michael Whittle

Financial Trading Dashboard Built with Python Django and AnyChart JavaScript ChartsWe are pleased to share an insightful article by Michael Whittle, a seasoned solution architect and developer with over 20 years of experience. Originally published on EODHD.com, it explores how he integrated our JavaScript charting library into a financial trading dashboard built with Python Django. Michael also shares his experience migrating a treemap from D3.js to AnyChart and explains why he chose our solution for implementing a stock chart, highlighting the intuitive code and enhanced functionality. Read on to discover how you can elevate your financial data visualizations in Python Django web applications with AnyChart JS Charts.

Read the article »


Gantt Chart Legend — JS Chart Tips

November 21st, 2024 by AnyChart Team

A JavaScript Gantt chart with a legend, displayed with its codeLegend is a vital element in many charts, helping viewers quickly understand what each visual component represents. However, it is not always a must-have for every chart type. For instance, Gantt charts often work perfectly fine without a legend, so it is not enabled in our JavaScript Gantt Chart by default. That said, creating one is straightforward. Right now, we will show you how to add a legend to a Gantt chart — join us as we continue our JS Chart Tips series, sharing quick solutions inspired by real customer queries!

Read more »


3 Ways to Set Height and Width of JavaScript Charts — JS Chart Tips

October 17th, 2024 by AnyChart Team

JavaScript chart with custom width and height, showing codeNavigating chart dimensions is key in crafting user-friendly visual presentations, especially when integrating multiple charts into an existing web page or app screen. In our JavaScript chart tutorials, charts are usually showcased as stretching across an entire web page. But it’s far from rocket science to make them smaller. In today’s JS Chart Tips, we explore three effective ways to resize your charts by adjusting their width and height.

Read more »


JavaScript Line Chart with Annotations — JS Chart Tips

October 10th, 2024 by AnyChart Team

JavaScript Line Chart with Annotations Shown with CodeAnnotations in charts, such as shapes or text markers, can greatly enhance data narratives by providing more context directly on the visual plane. Thus, it’s no surprise that the ability to add them is one of the most sought-after features of our JavaScript charting library. Although typically used in stock charts, annotations can be just as effective in standard graphics for highlighting specific data points or trends. In this edition of JS Chart Tips, you’ll learn how to add annotations to a basic line chart.

Read more »


Creating Timeline Chart of Roman History Using JavaScript

October 3rd, 2024 by AnyChart Team

A laptop with an interactive timeline chart of Roman history, from the Roman Empire to the Byzantine Empire, created using JavaScript in this tutorialEver caught yourself thinking about the Roman Empire more often than you’d like to admit? You’re not alone, and we’ve got just the thing for you! With the recent AnyChart JS Charts 8.13.0 release, we’ve enhanced our timeline chart for better support of historical data visualization. We’d love to showcase this improvement in action.

We’ve added a Roman History Timeline to our gallery of timeline chart examples, and we now invite you to discover how it was developed from scratch. In this in-depth JavaScript charting tutorial, we’ll cover everything from A to Z, meticulously guiding you through each step — from setting up the HTML environment to adding detailed data and customizing the visualization to make the chart both informative and engaging. The final result is an interactive timeline that you can proudly call your own Roman Empire.

So, whether you’re a history enthusiast caught up in the recent meme trend or a developer eager to expand your data visualization skills, follow along and learn how to create compelling historical timeline charts using JavaScript!

Read the JS charting tutorial »