Population Pyramid for Different Regions in Highcharts

Using Highcharts, I would like to create a population pyramid similar to this:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-negative-stack/

but it will compare different regions. Therefore, instead of one bar for each age group and gender, I would have 3 bars, each of which would represent a different region.

What I have so far, but I'm not sure that I will go in the right direction.

http://jsfiddle.net/YCxgr/

As you can see, the bars for this age category and region do not coincide with each other: I want the bars for the region to be correctly aligned for both sexes, so that they look like 3 bars (one for each region) instead of 6. As I can i achieve this?

+6
source share
2 answers

one for you jsFiddle now answering your question

series: [{ name: 'Region 1', zIndex: 1000, data: [[0, -3 ],[0,3],[1, -5] ,[1,5],[2, -4],[2,4],[3, -3],[3,3]] },{ name: 'Region 2', data: [[0, -4] ,[0,4],[1, -2],[1,2],[2, -6],[2,6],[3, -4],[3,4]] },{ name: 'Region 3', data: [[0, -3],[0,3],[1, -5],[1,5],[2, -4],[2,4],[3, -3],[3,3]] }] 

WORK jsFiddle

+5
source

When I looked at examples today, only an example of a simple simple pyramid worked. The other showed nothing in the results area.

I noticed that there are no links to the high diagram libraries, and the jquery version is at 1.4.2.

I fixed and adding links:

 <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> 

and choosing jQuery version 1.7.2. Now they show the pyramids (again). Cm:

I hope this helps others interested in examples.

+1
source

Source: https://habr.com/ru/post/919749/


All Articles