All Highcharts graphs share the same configuration structure and it is crucial for us to become familiar with the core components. However, it is not possible to go through all the configurations within the book. In this chapter, we will explore the functional properties that are most used and demonstrate them with examples. We will learn how Highcharts manages layout, and then explore how to configure axes, specify single series and multiple series data, followed by looking at formatting and styling tool tips in both JavaScript and HTML. After that, we will get to know how to polish our charts with various types of animations and apply color gradients. Finally, we will explore the drilldown interactive feature. In this chapter, we will cover the following topics:
- Understanding Highcharts layout
- Framing the chart with axes
- Revisiting the series config
- Styling the tool tips
- Animating charts
- Expanding colors with gradients
- Constructing a chart with a
drilldownseries
In the Highcharts configuration object, the components at the top level represent the skeleton structure of a chart. The following is a list of the major components that are covered in this chapter:
chart: This has configurations for the top-level chart properties such as layouts, dimensions, events, animations, and user interactionsseries: This is an array of series objects (consisting of data and specific options) for single and multiple series, where the series data can be specified in a number of waysxAxis/yAxis/zAxis: This has configurations for all the axis properties such as labels, styles, range, intervals, plotlines, plot bands, and backgroundstooltip: This has the layout and format style configurations for the series data tool tipsdrilldown: This has configurations for drilldown series and the ID field associated with the main seriestitle/subtitle: This has the layout and style configurations for the chart title and subtitlelegend: This has the layout and format style configurations for the chart legendplotOptions: This contains all the plotting options, such as display, animation, and user interactions, for common series and specific series typesexporting: This has configurations that control the layout and the function of print and export features
For reference information concerning all configurations, go to http://api.highcharts.com.