Understanding Highcharts – Categorized Series Data

This is a part of the Understanding Highcharts – Series Data blog series

Categories are a bunch of strings that sit on your independent (generally x) axis. Say, for plotting average temperature by country, the country names on the x-axis are categories. This is the simplest form of data, the points & x-axis labels are equally spaced horizontally.

Highcharts supports defining this kind of data in the following two ways

Method I – Using xAxis.categories

Defining the categories at once while defining the x-axis using the xAxis.categories option, and defining only the y values for each series

Method II – Using {name,y} point format

If you are like me, you may not find the above approach very natural. The approach asked us to define all x-values (categories) first and then the y-values as another array, I prefer defining my points as (x,y) or something similar. Well, now we can do just that with Highcharts 3.0, which supports defining categories at the time of defining your data. The series.data now also takes an array of objects, with two properties viz. name and y. The name acts as the category. Additionally we need to instruct Highcharts to use the xAxis as a category axis as follows.

Basic observation tells that the first method allows defining categories only once, hence if there are multiple series having same set of categories the first comes handy and prevents repetition & duplication. I would also use the first form if the set of categories were to be static, this would allow me to easily elevate the categories in a default option object. The second approach is more suited, in my opinion, for situations where the data and the categories are generated programmatically.

Read more @ Understanding Highcharts – Series Data blog series

Reference Links

Jugal Thakkar

Jugal Thakkar is a C# professional, JavaScript expert and an Android fan boy. He forges user-friendly enterprise web applications and enjoys data crunching & visualization. He is passionate about mobile and web technologies & appreciates open source.

He has been a preacher of Highcharts since he got acquainted with it at work & now attempts to help developers on Stack Overflow with his little knowledge. He occasionally blogs about Highcharts & has been a reviewer of the Highcharts Cookbook recently.

Jugal relishes playing Ping-Pong, solving puzzles or trying his luck at a Bowling alley. To know of what he learns, experiments and explores visit http://jugal.me/ or follow his blog, A Humble Opinion, @ http://ahumbleopinion.com/

Latest posts by Jugal Thakkar (see all)

  • yash

    Hi,
    i want to do something like as showing in method 1 but where two points intercept i want to show both points(delhi & mumbai).
    please give me any idea.
    thanks