Highchart bubble chart with area chart

Question & Answer
,
1

I am trying to build a combination chart of highchart : bubble and 4 area charts.
It only displays one or the other not both(I mean all 5).
How do you join 2 different series : one with map and other without.

Attached is my code below:

“series”: [“map”, [“unique”, [“getColumn”, 1] ], //Unique values from instititution name
{
“type”:“bubble”,
“color”: “#2994C7”,
“yAxis”:0,
“xAxis”:0,
“name”:[“item”],
“data”: [“map”,[“filter”,[“getColumn”, 1,2,3,4],[“==”, [“get”,[“item”],0], [“item”,2] ] ] ,
[ [“get”,[“item”],1],[“get”,[“item”],2], [“get”,[“item”],3] ]]

},
   { // next four series are for color
    "type": "area",
    "yAxis":1,
    "xAxis":1,
    "fillOpacity": 0.4,
    "data": [[-1, -1], [0, -1]]
},
{ // next four series are for color
    "type": "area",
    "yAxis":1,
    "xAxis":1,
    "fillOpacity": 0.4,
    "data": [[-1,1],[0, 1]]
},
    { // next four series are for color
    "type": "area",
    "yAxis":1,
    "xAxis":1,
    "fillOpacity": 0.4,
    "data": [[0, 1],[1, 1]]
},
        { // next four series are for color
    "type": "area",
    "yAxis":1,
    "xAxis":1,
    "fillOpacity": 0.4,
    "data": [[0, -1],[1,-1]]
}

]

2

Hello @adevaraj hope this message finds you well!!

as sugestion, maybe this work for you:

 {
    chart: { type: 'bubble' },
    title: { text: 'Combination Chart' },
    xAxis: [{ gridLineWidth: 1 }],
    yAxis: [
        { title: { text: 'Primary Axis' } },
        { title: { text: 'Secondary Axis' }, opposite: true }
    ],
    series: [
        {
            type: 'bubble',
            color: '#2994C7',
            yAxis: 0,
            xAxis: 0,
            name: 'Bubble Series',
            data: [
                // Replace this array with your processed data
                [9, 81, 63], [98, 5, 89], [51, 50, 73], [41, 22, 14],
                [58, 24, 20], [78, 37, 34], [55, 56, 53], [18, 45, 70],
                [42, 44, 28], [3, 52, 59], [31, 18, 97], [79, 91, 63],
                [93, 23, 23], [44, 83, 22]
            ]
        },
        { type: 'area', yAxis: 1, xAxis: 1, fillOpacity: 0.4, data: [[-1, -1], [0, -1]] },
        { type: 'area', yAxis: 1, xAxis: 1, fillOpacity: 0.4, data: [[-1, 1], [0, 1]] },
        { type: 'area', yAxis: 1, xAxis: 1, fillOpacity: 0.4, data: [[0, 1], [1, 1]] },
        { type: 'area', yAxis: 1, xAxis: 1, fillOpacity: 0.4, data: [[0, -1], [1, -1]] }
    ]
});```


ensure that each series is correctly configured and that the axes are set up to accommodate multiple chart types

I use this as reference: https://www.highcharts.com/docs/chart-and-series-types/bubble-series

tell me if it's work
3

@lary_andr thanks for your response.

I cannot use predetermined values for the bubble chart. Nor can I use a simple data for bubble chart. I need to use the map function for the bubble chart .

Thanks,
Amita