Share this

Color coded data

Torstein Honsi Avatar

by

2 minutes read

Color axis

 
In Highcharts v7.2, we took the existing colorAxis out of maps and heatmaps and made it available for almost all series types. This means we can apply another data dimension to traditional charts like pie charts or column charts. A column chart with a color axis can now visualize three dimensions – the category, the Y value and a custom third value encoded by color. Other chart types that already visualize three dimensions, like bubble, variwide or variable pie, can now be extended to four data dimensions.

In addition to being available on almost all series types, a chart can now contain multiple color axis. This comes in handy if you want different color coding for your chart’s series, analogous to having multiple Y axes for series of different magnitude. The multiple color axes will appear in the legend.

The new implementation includes the following new API options:

  • series.colorKey – Determines what data value should be used to calculate the point color if a color axis is used. See example.
  • series.colorAxis – When using dual or multiple color axes, this setting defines which color axis the particular series is connected to. It can either be a number referring to the color axis index, or a string referring to its id.
  • colorAxis.layout – While previously the color axis would render horizontally in a horizontal legend and vertically in a vertical legend, the layout can now be set independently. See example.

 

Information about feature updates from 7.1. can be found here, and the 7.0 release announcement can be found here.

Stay in touch

No spam, just good stuff

We're on discord. Join us for challenges, fun and whatever else we can think of
XSo MeXSo Me Dark
Linkedin So MeLinkedin So Me Dark
Facebook So MeFacebook So Me Dark
Github So MeGithub So Me Dark
Youtube So MeYoutube So Me Dark
Instagram So MeInstagram So Me Dark
Stackoverflow So MeStackoverflow So Me Dark
Discord So MeDiscord So Me Dark

Comments

  1. Ben

    |

    I love the color palette used on the second chart!


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.