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 and Rich Interactions Showcase 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. 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.
Start using SciChart.js Today
SciChart.js is now available with a FREE community edition (no trial, sign-up or credit card required) where you can try out the library commercially or use it in a non-commercial application. If you have a question, or would like to give feedback, contact us.
Top comments (0)