Best JavaScript chart customizations you should know

Whatever industry you’re operating in, creating JavaScript Charts that offer high performance is just one piece of the puzzle. Having worked with domain experts across applications in oil, gas, automotive, motorsport and healthcare, we’ve come to learn that organizations don’t just want performance and reliability in their charts; they also want to create data visualizations that are easy to use and appealing to the user.

It’s all about flexibility. You want to be able to not only visualise data, but also interact with it in a way that’s meaningful for your business or your client’s needs.

Let’s take a look at some of the ways SciChart.js can help you achieve highly customised JavaScript charts that can help elevate the look, feel and accessibility of your applications. Competing chart libraries often fall short, but with the right software, you can open up endless customization possibilities.

How to create customized charts with JS

With SciChart, it couldn’t be easier to build highly interactive custom JavaScript charts from the ground up. We supply a number of APIs that you can optionally include in your application to do the following:

Add callbacks in JavaScript on series hover
Or, on series selection
Or, data-point selection
Programmatic hit-testing
Updating chart data in any of the events above like in this demo.

This means you can create any kind of interaction on the chart. Not only that but cursors, crosshairs, tooltips and customisable legends are available out of the box.

Above*: SciChart.js Interactive [Waterfall Chart demo](https://demo.scichart.com/javascript-interactive-waterfall-chart) and [Rich Interactions Showcase](https://demo.scichart.com/javascript-heatmap-interactions) demo*

Mix and match Layouts and Chart Types

On 2D JS charts, you can mix and match to combine hundreds of series of different types on the same chart. This helps put different data visualizations together to create new insights. Aside from this, there are endless chart customisations for axis and layout, which we will outline below:

Unlimited, multiple axis on the left/right/top/bottom of the chart.
Rotate charts vertically and have series and tooltips work from top to bottom.
Stack and align axis to create EEG style charts.
Have axis inside, outside the chart, or in the centre.
Mix axis types on the chart: Linear Axis, Category Axis, Date Axis, and Logarithmic Axis are all supported.
Specify formatting of the labels precisely or dynamically vary label formatting based on zoom.
Vary the spacing of axis gridlines, labels, even vary them programmatically and unequally
The layout API can be extended for unusual axis alignments or layouts.
Style everything in the axis, and change axis part visibility.
Listen to axis range changes and programmatically zoom or autofit an axis.

Above*: SciChart.js [Axis Configuration demos](https://demo.scichart.com/javascript-chart-with-multiple-x-axis). Many configurations of Axis Layout are possible with SciChart.*

Custom animations using JavaScript libraries

With the right chart library, you can animate anything with ease.

Animate style transitions
Animate data transitions
Animate hover state
Animate legends and labels
Animate selected state
Animate chart series on load
Animate visible range changes
Generic animation

This scatter series chart animation is demonstrating how to run Dataset Animations. Every second, new random values are generated for the scatter series and the transition from one state to another is animated.

Styling

With styling customizations, you can get the charts to fit your design guides. Stay on brand and delight your users. Styling customizations include colors, fonts, borders, lines and background images. With the ability to convert text to speech voiceovers and resize text, styling changes can even make your data more accessible.

Style labels in code
Style series in code
Style chart parts in code
Create a re-usable theme
Dashed line styling
Image behind chart
DOM behind chart (DOM – HTML – transparent background chart)
Theme loader/startup animation
PaletteProvider API for a per-point coloring

An example of adding a background image by setting a transparent background. We also support blurred or glass effect backgrounds.

Who Uses SciChart?

SciChart’s fully customizable JavaScript chart libraries are used by top banks, top 10 Formula 1 teams and companies in the tech, medical, engineering, electrical, and oil and gas domains. As you can see from the examples outlined above, we support a diverse range of customized features to help your users get the most out of their data.