gloftus
Posts: 1
Joined: Mon May 02, 2022 11:08 pm

Basic Bar Chart Using Arrays

Hello ~

I'm new to Highcharts (and fairly new to java as well) and am trying to create a basic bar chart with a series that is grouped. My data is coming from a datatable (datatables.net). I have 3 columns in that datatable: year, policy type and a dollar amount. I need a chart that looks like the sample in https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-basic but where there are months I'd like to see years and where there are cities, I'd like to see policy types. I don't understand how to get the data into the series, as shown in the example. I have tried separate 3 arrays, one for each column and I have tried all 3 columns in one array, but I haven't found an example or directions on how to convert an array to what the chart is expecting. I think I need something like this...

xAxis: {
categories: [
'2018',
'2019',
'2020'
],

series: [{
name: 'Liability',
data: [100, 200, 300]

}, {
name: 'Property',
data: [50,75,100]

}, {
name: 'Crime',
data: [25, 87, 500]

}]

...and I have something that looks like this:

dataArray({year: 2018},{type:Liability},{amount:100})
dataArray({year: 2018},{type:Property},{amount:50})
dataArray({year: 2018},{type:Crime},{amount:25})
dataArray({year: 2019},{type:Liability},{amount:200})
dataArray({year: 2019},{type:Property},{amount:75})
dataArray({year: 2019},{type:Crime},{amount:258})
...etc


The years and the policy types can vary, so I don't want to hard code the categories in the definition. I would appreciate any examples or direction to the appropriate documentation on how to get my data into the right format. Thanks in advance for any advice!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Basic Bar Chart Using Arrays

Hi gloftus,

Welcome to our forum and thanks for contacting us with your question!

Each object in series array represent different series. Here you can read more about configuration options for column series:
https://api.highcharts.com/highcharts/series.column

Series' points can be defined in three ways which you can find here:
https://api.highcharts.com/highcharts/s ... olumn.data

Because in your case it seems like you don't want to use predefined categories array, you should use arrays or objects to declare points, where first array item or name property in case of object, describes point category. To do so you might need to parse your data. Here is an example how the final result should look like:
https://jsfiddle.net/BlackLabel/r475jsmx/

Let me know if you have any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”