Bubble heatmap in Vue Heatmap chart component

13 Jun 202424 minutes to read

This section shows how to customize the appearance of the HeatMap cells as bubbles. The below video demonstrates the same.

Data points represent the data source values with gradient or fixed colors in the HeatMap. You can customize the appearance of these data points by changing the color and size attributes.

The data points can be represented in color fill or bubble shape by defining the tileType property. By default, the data points are color filled with gradient or fixed colors and this depiction of data points is defined as Rect in the tileType property.

The cell customizations and color mapping for rect tile type is defined in appearance and palette sections in detail.

Bubble types

The data points can be represented in the bubble along with its attributes by setting the tileType property to Bubble.

In bubble HeatMap, you can display the data points with bubble size, bubble colors, and sector attributes of the bubble.

Bubble size

In this bubble HeatMap type, the size factor of the bubble is used to denote the data variations. The radius of the bubble varies according to data values.

By default, the bubble with small size denotes the data value with small magnitude and the larger bubble size denotes the data value with larger magnitude. This behavior can be inversed by using the isInversedbubblesize property.

To render a bubble HeatMap with size series, set the bubbleType property to Size.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings'></ejs-heatmap>
    </div>
</template>
<script setup>
import { provide } from 'vue';
import { HeatMapComponent as EjsHeatmap, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';

const dataSource = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
const paletteSettings = {
    palette: [
        { color: '#C06C84' },
        { color: '#6C5B7B' },
        { color: '#355C7D' }
    ],
    type: "Gradient"
};
const legendSettings = {
    visible: true,
};
const cellSettings = {
    border: {
        width: 1
    },
    tileType: 'Bubble',
    bubbleType: 'Size',
    showLabel: false
};

provide('heatmap', [Tooltip, Legend, Adaptor]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';

export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [73, 39, 26, 39, 94, 0],
                [93, 58, 53, 38, 26, 68],
                [99, 28, 22, 4, 66, 90],
                [14, 26, 97, 69, 69, 3],
                [7, 46, 47, 47, 88, 6],
                [41, 55, 73, 23, 3, 79],
                [56, 69, 21, 86, 3, 33],
                [45, 7, 53, 81, 95, 79],
                [60, 77, 74, 68, 88, 51],
                [25, 25, 10, 12, 78, 14],
                [25, 56, 55, 58, 12, 82],
                [74, 33, 88, 23, 86, 59]
            ],
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
            },
            paletteSettings: {
                palette: [
                    { color: '#C06C84' },
                    { color: '#6C5B7B' },
                    { color: '#355C7D' }
                ],
                type: "Gradient"
            },
            legendSettings: {
                visible: true,
            },
            cellSettings: {
                border: {
                    width: 1
                },
                tileType: 'Bubble',
                bubbleType: 'Size',
                showLabel: false
            },
        }
    },
    provide: {
        heatmap: [Legend, Adaptor, Tooltip]
    }
}
</script>

Bubble color

In HeatMap, defined with this tile type, the data points will be represented with same sized bubbles and the data value variations are represented with the bubble colors.

To represent the data points with variations in bubble colors, set the bubbleType property to Color.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings'></ejs-heatmap>
    </div>
</template>
<script setup>
import { provide } from 'vue';
import { HeatMapComponent as EjsHeatmap, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';

const dataSource = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
    labelRotation: 45,
    labelIntersectAction: 'None'
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
const paletteSettings = {
    palette: [
        { color: '#C06C84' },
        { color: '#6C5B7B' },
        { color: '#355C7D' }
    ],
    type: "Gradient"
};
const legendSettings = {
    visible: true,
};
const cellSettings = {
    border: {
        width: 1
    },
    tileType: 'Bubble',
    bubbleType: 'Color'
};

provide('heatmap', [Tooltip, Legend, Adaptor]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';

export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [73, 39, 26, 39, 94, 0],
                [93, 58, 53, 38, 26, 68],
                [99, 28, 22, 4, 66, 90],
                [14, 26, 97, 69, 69, 3],
                [7, 46, 47, 47, 88, 6],
                [41, 55, 73, 23, 3, 79],
                [56, 69, 21, 86, 3, 33],
                [45, 7, 53, 81, 95, 79],
                [60, 77, 74, 68, 88, 51],
                [25, 25, 10, 12, 78, 14],
                [25, 56, 55, 58, 12, 82],
                [74, 33, 88, 23, 86, 59]
            ],
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
                labelRotation: 45,
                labelIntersectAction: 'None'
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
            },
            paletteSettings: {
                palette: [
                    { color: '#C06C84' },
                    { color: '#6C5B7B' },
                    { color: '#355C7D' }
                ],
                type: "Gradient"
            },
            legendSettings: {
                visible: true,
            },
            cellSettings: {
                border: {
                    width: 1
                },
                tileType: 'Bubble',
                bubbleType: 'Color'
            },
        }
    },
    provide: {
        heatmap: [Legend, Adaptor, Tooltip]
    }
}
</script>

Bubble sector

In this bubble HeatMap type, the sector of the bubble decides the magnitude of data point. If the sector is large, then the data point value will be high.

To render the data points with bubble sector, set the bubbleType property to Sector.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings'></ejs-heatmap>
    </div>
</template>
<script setup>
import { provide } from 'vue';
import { HeatMapComponent as EjsHeatmap, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';


const dataSource = [
    [73, 39, 26, 39, 94, 0],
    [93, 58, 53, 38, 26, 68],
    [99, 28, 22, 4, 66, 90],
    [14, 26, 97, 69, 69, 3],
    [7, 46, 47, 47, 88, 6],
    [41, 55, 73, 23, 3, 79],
    [56, 69, 21, 86, 3, 33],
    [45, 7, 53, 81, 95, 79],
    [60, 77, 74, 68, 88, 51],
    [25, 25, 10, 12, 78, 14],
    [25, 56, 55, 58, 12, 82],
    [74, 33, 88, 23, 86, 59]
];
const titleSettings = {
    text: 'Sales Revenue per Employee (in 1000 US$)',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
        'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
};
const yAxis = {
    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
};
const paletteSettings = {
    palette: [
        { color: '#C06C84' },
        { color: '#6C5B7B' },
        { color: '#355C7D' }
    ],
    type: "Gradient"
};
const legendSettings = {
    visible: true,
};
const cellSettings = {
    border: {
        width: 1
    },
    tileType: 'Bubble',
    bubbleType: 'Sector'
};

provide('heatmap', [Tooltip, Legend, Adaptor]);

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [73, 39, 26, 39, 94, 0],
                [93, 58, 53, 38, 26, 68],
                [99, 28, 22, 4, 66, 90],
                [14, 26, 97, 69, 69, 3],
                [7, 46, 47, 47, 88, 6],
                [41, 55, 73, 23, 3, 79],
                [56, 69, 21, 86, 3, 33],
                [45, 7, 53, 81, 95, 79],
                [60, 77, 74, 68, 88, 51],
                [25, 25, 10, 12, 78, 14],
                [25, 56, 55, 58, 12, 82],
                [74, 33, 88, 23, 86, 59]
            ],
            titleSettings: {
                text: 'Sales Revenue per Employee (in 1000 US$)',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            xAxis: {
                labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven',
                    'Michael', 'Robert', 'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
            },
            yAxis: {
                labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
            },
            paletteSettings: {
                palette: [
                    { color: '#C06C84' },
                    { color: '#6C5B7B' },
                    { color: '#355C7D' }
                ],
                type: "Gradient"
            },
            legendSettings: {
                visible: true,
            },
            cellSettings: {
                border: {
                    width: 1
                },
                tileType: 'Bubble',
                bubbleType: 'Sector'
            },
        }
    },
    provide: {
        heatmap: [Legend, Adaptor, Tooltip]
    }
}
</script>

Combining size and color bubble types

In this bubble HeatMap type, size and color of the bubble represents the data value variation. To render this bubble HeatMap type, set the bubbleType property to SizeAndColor.

The following examples demonstrate different data binding with the SizeAndColor bubble type set in the HeatMap.

Array binding

When an array of numbers is specified as the data source, the bubble HeatMap can be rendered with different sizes and colors depending on the bound data.

Table

The following example illustrates how to render a bubble HeatMap with different sizes and colors using array table binding.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :paletteSettings='paletteSettings' :cellSettings='cellSettings' :legendSettings='legendSettings'
            :tooltipRender='tooltipRender'></ejs-heatmap>
    </div>
</template>
<script setup>
import { provide } from 'vue';
import { HeatMapComponent as EjsHeatmap, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';

const dataSource = [
    [[4, 39], [3, 8], [1, 3], [1, 10], [4, 4], [2, 15]],
    [[4, 28], [5, 92], [5, 73], [3, 1], [3, 4], [4, 126]],
    [[4, 45], [5, 152], [0, 44], [4, 54], [5, 243], [2, 45]]
];
const titleSettings = {
    text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['2017', '2016', '2015']
};
const yAxis = {
    labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
};
const paletteSettings = {
    palette: [
        { color: '#C06C84' },
        { color: '#6C5B7B' },
        { color: '#355C7D' }
    ],
    type: "Gradient"
};
const legendSettings = {
    visible: true,
};
const cellSettings = {
    border: {
        width: 1
    },
    tileType: 'Bubble',
    bubbleType: 'SizeAndColor'
};

provide('heatmap', [Tooltip, Legend, Adaptor]);

const tooltipRender = (args) => {
    args.content = ['Year ' + ' : ' + args.xLabel + '<br/>' + 'Months ' + ' : ' + args.yLabel + '<br/>'
        + 'Accidents ' + ' : ' + args.value[0].bubbleData + '<br/>' + 'Fatalities ' + ' : '
        + args.value[1].bubbleData];
}

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :paletteSettings='paletteSettings' :cellSettings='cellSettings' :legendSettings='legendSettings'
            :tooltipRender='tooltipRender'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';

export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [[4, 39], [3, 8], [1, 3], [1, 10], [4, 4], [2, 15]],
                [[4, 28], [5, 92], [5, 73], [3, 1], [3, 4], [4, 126]],
                [[4, 45], [5, 152], [0, 44], [4, 54], [5, 243], [2, 45]]
            ],
            titleSettings: {
                text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            xAxis: {
                labels: ['2017', '2016', '2015']
            },
            yAxis: {
                labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
            },
            paletteSettings: {
                palette: [
                    { color: '#C06C84' },
                    { color: '#6C5B7B' },
                    { color: '#355C7D' }
                ],
                type: "Gradient"
            },
            legendSettings: {
                visible: true,
            },
            cellSettings: {
                border: {
                    width: 1
                },
                tileType: 'Bubble',
                bubbleType: 'SizeAndColor'
            },
        }
    },
    provide: {
        heatmap: [Legend, Adaptor, Tooltip]
    },
    methods: {
        tooltipRender: function (args) {
            args.content = ['Year ' + ' : ' + args.xLabel + '<br/>' + 'Months ' + ' : ' + args.yLabel + '<br/>'
                + 'Accidents ' + ' : ' + args.value[0].bubbleData + '<br/>' + 'Fatalities ' + ' : '
                + args.value[1].bubbleData];
        }
    }
}
</script>

Cell

The following example illustrates how to render a bubble HeatMap with different sizes and colors using array cell binding.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :dataSourceSettings='dataSourceSettings' :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings' :tooltipRender='tooltipRender'></ejs-heatmap>
    </div>
  </template>
  <script setup>
  
  import { provide } from 'vue';
  import { HeatMapComponent as EjsHeatmap, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';
  
  
  const dataSource = [
    [0, 0, [4, 39]], [0, 1, [3, 8]], [0, 2, [1, 3]], [0, 3, [1, 10]], [0, 4, [4, 4]], [0, 5, [2, 15]],
    [1, 0, [4, 28]], [1, 1, [5, 92]], [1, 2, [5, 73]], [1, 3, [3, 1]], [1, 4, [3, 4]], [1, 5, [4, 126]],
    [2, 0, [4, 45]], [2, 1, [5, 152]], [2, 2, [0, 44]], [2, 3, [4, 54]], [2, 4, [5, 243]], [2, 5, [2, 45]]
  ];
  const dataSourceSettings = {
    isJsonData: false,
    adaptorType: 'Cell'
  };
  const titleSettings= {
    text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
  };
  const xAxis = {
    labels: ['2017', '2016', '2015']
  };
  const yAxis = {
    labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
  };
  const paletteSettings = {
    palette: [
        { color: '#C06C84' },
        { color: '#6C5B7B' },
        { color: '#355C7D' }
    ],
    type: "Gradient"
  };
  const legendSettings = {
    visible: true,
  };
  const cellSettings = {
    border: {
        width: 1
    },
    tileType: 'Bubble',
    bubbleType: 'SizeAndColor'
  };
  
  const tooltipRender = (args) => {
    args.content = ['Year ' + ' : ' + args.xLabel + '<br/>' + 'Months ' + ' : ' + args.yLabel + '<br/>'
        + 'Accidents ' + ' : ' + args.value[0].bubbleData + '<br/>' + 'Fatalities ' + ' : '
        + args.value[1].bubbleData];
  };
  
  provide('heatmap', [Tooltip, Legend, Adaptor]);
  
  </script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :dataSourceSettings='dataSourceSettings' :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings' :tooltipRender='tooltipRender'></ejs-heatmap>
    </div>
</template>
<script>

import { HeatMapComponent, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';


export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                [0, 0, [4, 39]], [0, 1, [3, 8]], [0, 2, [1, 3]], [0, 3, [1, 10]], [0, 4, [4, 4]], [0, 5, [2, 15]],
                [1, 0, [4, 28]], [1, 1, [5, 92]], [1, 2, [5, 73]], [1, 3, [3, 1]], [1, 4, [3, 4]], [1, 5, [4, 126]],
                [2, 0, [4, 45]], [2, 1, [5, 152]], [2, 2, [0, 44]], [2, 3, [4, 54]], [2, 4, [5, 243]], [2, 5, [2, 45]]
            ],
            dataSourceSettings: {
                isJsonData: false,
                adaptorType: 'Cell'
            },
            titleSettings: {
                text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            xAxis: {
                labels: ['2017', '2016', '2015']
            },
            yAxis: {
                labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
            },
            paletteSettings: {
                palette: [
                    { color: '#C06C84' },
                    { color: '#6C5B7B' },
                    { color: '#355C7D' }
                ],
                type: "Gradient"
            },
            legendSettings: {
                visible: true,
            },
            cellSettings: {
                border: {
                    width: 1
                },
                tileType: 'Bubble',
                bubbleType: 'SizeAndColor'
            },
        }
    },
    provide: {
        heatmap: [Legend, Adaptor, Tooltip]
    },
    methods: {
        tooltipRender: function (args) {
            args.content = ['Year ' + ' : ' + args.xLabel + '<br/>' + 'Months ' + ' : ' + args.yLabel + '<br/>'
                + 'Accidents ' + ' : ' + args.value[0].bubbleData + '<br/>' + 'Fatalities ' + ' : '
                + args.value[1].bubbleData];
        }
    }
}
</script>

JSON binding

When a list of JSON objects are specified as data source, the bubble HeatMap can be rendered with different sizes and colors depending on the bound data.

Table

The following example illustrates how to render a bubble HeatMap with different sizes and colors using JSON table binding.

<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :dataSourceSettings='dataSourceSettings' :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings' :tooltipRender='tooltipRender'></ejs-heatmap>
    </div>
</template>
<script setup>

import { provide } from 'vue';
import { HeatMapComponent as EjsHeatmap, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';

const dataSource = [
    { 'Year': '2017', 'Jan-Feb': [4, 39], 'Mar-Apr': [3, 8], 'May-Jun': [1, 3], 'Jul-Aug': [1, 10], 'Sep-Oct': [4, 4], 'Nov-Dec': [2, 15] },
    { 'Year': '2016', 'Jan-Feb': [4, 28], 'Mar-Apr': [5, 92], 'May-Jun': [5, 73], 'Jul-Aug': [3, 1], 'Sep-Oct': [3, 4], 'Nov-Dec': [4, 126] },
    { 'Year': '2015', 'Jan-Feb': [4, 45], 'Mar-Apr': [5, 152], 'May-Jun': [0, 44], 'Jul-Aug': [4, 54], 'Sep-Oct': [5, 243], 'Nov-Dec': [2, 45] }
];
const dataSourceSettings = {
    isJsonData: true,
    adaptorType: 'Table',
    xDataMapping: 'Year'
}
const titleSettings = {
    text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',
    textStyle: {
        size: '15px',
        fontWeight: '500',
        fontStyle: 'Normal',
        fontFamily: 'Segoe UI'
    }
};
const xAxis = {
    labels: ['2017', '2016', '2015']
};
const yAxis = {
    labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
};
const paletteSettings = {
    palette: [
        { color: '#C06C84' },
        { color: '#6C5B7B' },
        { color: '#355C7D' }
    ],
    type: "Gradient"
};
const legendSettings = {
    visible: true,
};
const cellSettings = {
    border: {
        width: 1
    },
    tileType: 'Bubble',
    bubbleType: 'SizeAndColor'
};

provide('heatmap', [Tooltip, Legend, Adaptor]);

const tooltipRender = (args) => {
    args.content = ['Year ' + ' : ' + args.xLabel + '<br/>' + 'Months ' + ' : ' + args.yLabel + '<br/>'
        + 'Accidents ' + ' : ' + args.value[0].bubbleData + '<br/>' + 'Fatalities ' + ' : '
        + args.value[1].bubbleData];
};

</script>
<template>
    <div id="app">
        <ejs-heatmap id="heatmap" :titleSettings='titleSettings' :xAxis='xAxis' :yAxis='yAxis' :dataSource='dataSource'
            :dataSourceSettings='dataSourceSettings' :paletteSettings='paletteSettings' :cellSettings='cellSettings'
            :legendSettings='legendSettings' :tooltipRender='tooltipRender'></ejs-heatmap>
    </div>
  </template>
  <script>
  
  import { HeatMapComponent, Legend, Adaptor, Tooltip } from '@syncfusion/ej2-vue-heatmap';
  
  export default {
    name: "App",
    components: {
        "ejs-heatmap": HeatMapComponent
    },
    data: function () {
        return {
            dataSource: [
                { 'Year': '2017', 'Jan-Feb': [4, 39], 'Mar-Apr': [3, 8], 'May-Jun': [1, 3], 'Jul-Aug': [1, 10], 'Sep-Oct': [4, 4], 'Nov-Dec': [2, 15] },
                { 'Year': '2016', 'Jan-Feb': [4, 28], 'Mar-Apr': [5, 92], 'May-Jun': [5, 73], 'Jul-Aug': [3, 1], 'Sep-Oct': [3, 4], 'Nov-Dec': [4, 126] },
                { 'Year': '2015', 'Jan-Feb': [4, 45], 'Mar-Apr': [5, 152], 'May-Jun': [0, 44], 'Jul-Aug': [4, 54], 'Sep-Oct': [5, 243], 'Nov-Dec': [2, 45] }
            ],
            dataSourceSettings: {
                isJsonData: true,
                adaptorType: 'Table',
                xDataMapping: 'Year'
            },
        titleSettings: {
                text: 'Commercial Aviation Accidents and Fatalities by year 2012 - 2017',
                textStyle: {
                    size: '15px',
                    fontWeight: '500',
                    fontStyle: 'Normal',
                    fontFamily: 'Segoe UI'
                }
            },
            xAxis: {
                labels: ['2017', '2016', '2015']
            },
            yAxis: {
                labels: ['Jan-Feb', 'Mar-Apr', 'May-Jun', 'Jul-Aug', 'Sep-Oct', 'Nov-Dec']
            },
            paletteSettings: {
                palette: [
                    { color: '#C06C84' },
                    { color: '#6C5B7B' },
                    { color: '#355C7D' }
                ],
                type: "Gradient"
            },
            legendSettings: {
                visible: true,
            },
            cellSettings: {
                border: {
                    width: 1
                },
                tileType: 'Bubble',
                bubbleType: 'SizeAndColor'
            },
        }
    },
    provide: {
        heatmap: [Legend, Adaptor, Tooltip]
    },
    methods: {
        tooltipRender: function (args) {
            args.content = ['Year ' + ' : ' + args.xLabel + '<br/>' + 'Months ' + ' : ' + args.yLabel + '<br/>'
                + 'Accidents ' + ' : ' + args.value[0].bubbleData + '<br/>' + 'Fatalities ' + ' : '
                + args.value[1].bubbleData];
        }
    }
  }
  </script>

Cell

The following example illustrates how to render a bubble HeatMap with different sizes and colors using JSON cell binding.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings="titleSettings" :xAxis="xAxis" :yAxis="yAxis" :dataSource="dataSource"
      :dataSourceSettings="dataSourceSettings" :paletteSettings="paletteSettings" :cellSettings="cellSettings"
      :legendSettings="legendSettings" :tooltipRender="tooltipRender"></ejs-heatmap>
  </div>
</template>
<script setup>
import { provide } from "vue";
import {
  HeatMapComponent as EjsHeatmap,
  Legend,
  Adaptor,
  Tooltip
} from "@syncfusion/ej2-vue-heatmap";

const dataSource = [
  { Year: "2017", Months: "Jan-Feb", Accidents: 4, Fatalities: 39 },
  { Year: "2017", Months: "Mar-Apr", Accidents: 3, Fatalities: 8 },
  { Year: "2017", Months: "May-Jun", Accidents: 1, Fatalities: 3 },
  { Year: "2017", Months: "Jul-Aug", Accidents: 1, Fatalities: 10 },
  { Year: "2017", Months: "Sep-Oct", Accidents: 4, Fatalities: 4 },
  { Year: "2017", Months: "Nov-Dec", Accidents: 2, Fatalities: 15 },
  { Year: "2016", Months: "Jan-Feb", Accidents: 4, Fatalities: 28 },
  { Year: "2016", Months: "Mar-Apr", Accidents: 5, Fatalities: 92 },
  { Year: "2016", Months: "May-Jun", Accidents: 5, Fatalities: 73 },
  { Year: "2016", Months: "Jul-Aug", Accidents: 3, Fatalities: 1 },
  { Year: "2016", Months: "Sep-Oct", Accidents: 3, Fatalities: 4 },
  { Year: "2016", Months: "Nov-Dec", Accidents: 4, Fatalities: 126 },
  { Year: "2015", Months: "Jan-Feb", Accidents: 4, Fatalities: 45 },
  { Year: "2015", Months: "Mar-Apr", Accidents: 5, Fatalities: 152 },
  { Year: "2015", Months: "May-Jun", Accidents: 0, Fatalities: 0 },
  { Year: "2015", Months: "Jul-Aug", Accidents: 4, Fatalities: 54 },
  { Year: "2015", Months: "Sep-Oct", Accidents: 5, Fatalities: 243 },
  { Year: "2015", Months: "Nov-Dec", Accidents: 2, Fatalities: 45 }
];
const dataSourceSettings = {
  isJsonData: true,
  adaptorType: "Cell",
  xDataMapping: "Year",
  yDataMapping: "Months",
  bubbleDataMapping: { size: "Accidents", color: "Fatalities" }
};
const titleSettings = {
  text:
    "Commercial Aviation Accidents and Fatalities by year 2012 - 2017",
  textStyle: {
    size: "15px",
    fontWeight: "500",
    fontStyle: "Normal",
    fontFamily: "Segoe UI"
  }
};
const xAxis = {
  labels: ["2017", "2016", "2015"]
};
const yAxis = {
  labels: [
    "Jan-Feb",
    "Mar-Apr",
    "May-Jun",
    "Jul-Aug",
    "Sep-Oct",
    "Nov-Dec"
  ]
};
const paletteSettings = {
  palette: [
    { color: "#C06C84" },
    { color: "#6C5B7B" },
    { color: "#355C7D" }
  ],
  type: "Gradient"
};
const legendSettings = {
  visible: true
};
const cellSettings = {
  border: {
    width: 1
  },
  tileType: "Bubble",
  bubbleType: "SizeAndColor"
};

provide('heatmap', [Legend, Adaptor, Tooltip]);

const tooltipRender = (args) => {
  args.content = [
    "Year " +
    " : " +
    args.xLabel +
    "<br/>" +
    "Months " +
    " : " +
    args.yLabel +
    "<br/>" +
    "Accidents " +
    " : " +
    args.value[0].bubbleData +
    "<br/>" +
    "Fatalities " +
    " : " +
    args.value[1].bubbleData
  ];
};

</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings="titleSettings" :xAxis="xAxis" :yAxis="yAxis" :dataSource="dataSource"
      :dataSourceSettings="dataSourceSettings" :paletteSettings="paletteSettings" :cellSettings="cellSettings"
      :legendSettings="legendSettings" :tooltipRender="tooltipRender"></ejs-heatmap>
  </div>
</template>
<script>

import {
  HeatMapComponent,
  Legend,
  Adaptor,
  Tooltip
} from "@syncfusion/ej2-vue-heatmap";


export default {
  name: "App",
  components: {
    "ejs-heatmap": HeatMapComponent
  },
  data: function () {
    return {
      dataSource: [
        { Year: "2017", Months: "Jan-Feb", Accidents: 4, Fatalities: 39 },
        { Year: "2017", Months: "Mar-Apr", Accidents: 3, Fatalities: 8 },
        { Year: "2017", Months: "May-Jun", Accidents: 1, Fatalities: 3 },
        { Year: "2017", Months: "Jul-Aug", Accidents: 1, Fatalities: 10 },
        { Year: "2017", Months: "Sep-Oct", Accidents: 4, Fatalities: 4 },
        { Year: "2017", Months: "Nov-Dec", Accidents: 2, Fatalities: 15 },
        { Year: "2016", Months: "Jan-Feb", Accidents: 4, Fatalities: 28 },
        { Year: "2016", Months: "Mar-Apr", Accidents: 5, Fatalities: 92 },
        { Year: "2016", Months: "May-Jun", Accidents: 5, Fatalities: 73 },
        { Year: "2016", Months: "Jul-Aug", Accidents: 3, Fatalities: 1 },
        { Year: "2016", Months: "Sep-Oct", Accidents: 3, Fatalities: 4 },
        { Year: "2016", Months: "Nov-Dec", Accidents: 4, Fatalities: 126 },
        { Year: "2015", Months: "Jan-Feb", Accidents: 4, Fatalities: 45 },
        { Year: "2015", Months: "Mar-Apr", Accidents: 5, Fatalities: 152 },
        { Year: "2015", Months: "May-Jun", Accidents: 0, Fatalities: 0 },
        { Year: "2015", Months: "Jul-Aug", Accidents: 4, Fatalities: 54 },
        { Year: "2015", Months: "Sep-Oct", Accidents: 5, Fatalities: 243 },
        { Year: "2015", Months: "Nov-Dec", Accidents: 2, Fatalities: 45 }
      ],
      dataSourceSettings: {
        isJsonData: true,
        adaptorType: "Cell",
        xDataMapping: "Year",
        yDataMapping: "Months",
        bubbleDataMapping: { size: "Accidents", color: "Fatalities" }
      },
      titleSettings: {
        text:
          "Commercial Aviation Accidents and Fatalities by year 2012 - 2017",
        textStyle: {
          size: "15px",
          fontWeight: "500",
          fontStyle: "Normal",
          fontFamily: "Segoe UI"
        }
      },
      xAxis: {
        labels: ["2017", "2016", "2015"]
      },
      yAxis: {
        labels: [
          "Jan-Feb",
          "Mar-Apr",
          "May-Jun",
          "Jul-Aug",
          "Sep-Oct",
          "Nov-Dec"
        ]
      },
      paletteSettings: {
        palette: [
          { color: "#C06C84" },
          { color: "#6C5B7B" },
          { color: "#355C7D" }
        ],
        type: "Gradient"
      },
      legendSettings: {
        visible: true
      },
      cellSettings: {
        border: {
          width: 1
        },
        tileType: "Bubble",
        bubbleType: "SizeAndColor"
      }
    };
  },
  provide: {
    heatmap: [Legend, Adaptor, Tooltip]
  },
  methods: {
    tooltipRender: function (args) {
      args.content = [
        "Year " +
        " : " +
        args.xLabel +
        "<br/>" +
        "Months " +
        " : " +
        args.yLabel +
        "<br/>" +
        "Accidents " +
        " : " +
        args.value[0].bubbleData +
        "<br/>" +
        "Fatalities " +
        " : " +
        args.value[1].bubbleData
      ];
    }
  }
};
</script>

Binding size and color values from datasource

The size and color of the bubbles in the SizeAndColor bubble HeatMap type can be customized by binding the datasource field name that holds the size and color values to the size and color properties in the bubbleDataMapping.

The bubbleDataMapping supports only for the JSON data with cell adaptor type.

<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings="titleSettings" :xAxis="xAxis" :yAxis="yAxis" :dataSource="dataSource"
      :dataSourceSettings="dataSourceSettings" :paletteSettings="paletteSettings" :cellSettings="cellSettings"
      :legendSettings="legendSettings" :tooltipRender="tooltipRender"></ejs-heatmap>
  </div>
</template>
<script setup>
import { provide } from "vue";
import {
  HeatMapComponent as EjsHeatmap,
  Legend,
  Adaptor,
  Tooltip
} from "@syncfusion/ej2-vue-heatmap";

const dataSource = [
  { Year: "2017", Months: "Jan-Feb", Accidents: 4, Fatalities: 39 },
  { Year: "2017", Months: "Mar-Apr", Accidents: 3, Fatalities: 8 },
  { Year: "2017", Months: "May-Jun", Accidents: 1, Fatalities: 3 },
  { Year: "2017", Months: "Jul-Aug", Accidents: 1, Fatalities: 10 },
  { Year: "2017", Months: "Sep-Oct", Accidents: 4, Fatalities: 4 },
  { Year: "2017", Months: "Nov-Dec", Accidents: 2, Fatalities: 15 },
  { Year: "2016", Months: "Jan-Feb", Accidents: 4, Fatalities: 28 },
  { Year: "2016", Months: "Mar-Apr", Accidents: 5, Fatalities: 92 },
  { Year: "2016", Months: "May-Jun", Accidents: 5, Fatalities: 73 },
  { Year: "2016", Months: "Jul-Aug", Accidents: 3, Fatalities: 1 },
  { Year: "2016", Months: "Sep-Oct", Accidents: 3, Fatalities: 4 },
  { Year: "2016", Months: "Nov-Dec", Accidents: 4, Fatalities: 126 },
  { Year: "2015", Months: "Jan-Feb", Accidents: 4, Fatalities: 45 },
  { Year: "2015", Months: "Mar-Apr", Accidents: 5, Fatalities: 152 },
  { Year: "2015", Months: "May-Jun", Accidents: 0, Fatalities: 0 },
  { Year: "2015", Months: "Jul-Aug", Accidents: 4, Fatalities: 54 },
  { Year: "2015", Months: "Sep-Oct", Accidents: 5, Fatalities: 243 },
  { Year: "2015", Months: "Nov-Dec", Accidents: 2, Fatalities: 45 }
];
const dataSourceSettings = {
  isJsonData: true,
  adaptorType: "Cell",
  xDataMapping: "Year",
  yDataMapping: "Months",
  bubbleDataMapping: { size: "Accidents", color: "Fatalities" }
};
const titleSettings = {
  text:
    "Commercial Aviation Accidents and Fatalities by year 2012 - 2017",
  textStyle: {
    size: "15px",
    fontWeight: "500",
    fontStyle: "Normal",
    fontFamily: "Segoe UI"
  }
};
const xAxis = {
  labels: ["2017", "2016", "2015"]
};
const yAxis = {
  labels: [
    "Jan-Feb",
    "Mar-Apr",
    "May-Jun",
    "Jul-Aug",
    "Sep-Oct",
    "Nov-Dec"
  ]
};
const paletteSettings = {
  palette: [
    { color: "#C06C84" },
    { color: "#6C5B7B" },
    { color: "#355C7D" }
  ],
  type: "Gradient"
};
const legendSettings = {
  visible: true
};
const cellSettings = {
  border: {
    width: 1
  },
  tileType: "Bubble",
  bubbleType: "SizeAndColor"
};

provide('heatmap', [Legend, Adaptor, Tooltip]);

const tooltipRender = (args) => {
  args.content = [
    "Year " +
    " : " +
    args.xLabel +
    "<br/>" +
    "Months " +
    " : " +
    args.yLabel +
    "<br/>" +
    "Accidents " +
    " : " +
    args.value[0].bubbleData +
    "<br/>" +
    "Fatalities " +
    " : " +
    args.value[1].bubbleData
  ];
}
</script>
<template>
  <div id="app">
    <ejs-heatmap id="heatmap" :titleSettings="titleSettings" :xAxis="xAxis" :yAxis="yAxis" :dataSource="dataSource"
      :dataSourceSettings="dataSourceSettings" :paletteSettings="paletteSettings" :cellSettings="cellSettings"
      :legendSettings="legendSettings" :tooltipRender="tooltipRender"></ejs-heatmap>
  </div>
</template>
<script>

import {
  HeatMapComponent,
  Legend,
  Adaptor,
  Tooltip
} from "@syncfusion/ej2-vue-heatmap";


export default {
  name: "App",
  components: {
    "ejs-heatmap": HeatMapComponent
  },
  data: function () {
    return {
      dataSource: [
        { Year: "2017", Months: "Jan-Feb", Accidents: 4, Fatalities: 39 },
        { Year: "2017", Months: "Mar-Apr", Accidents: 3, Fatalities: 8 },
        { Year: "2017", Months: "May-Jun", Accidents: 1, Fatalities: 3 },
        { Year: "2017", Months: "Jul-Aug", Accidents: 1, Fatalities: 10 },
        { Year: "2017", Months: "Sep-Oct", Accidents: 4, Fatalities: 4 },
        { Year: "2017", Months: "Nov-Dec", Accidents: 2, Fatalities: 15 },
        { Year: "2016", Months: "Jan-Feb", Accidents: 4, Fatalities: 28 },
        { Year: "2016", Months: "Mar-Apr", Accidents: 5, Fatalities: 92 },
        { Year: "2016", Months: "May-Jun", Accidents: 5, Fatalities: 73 },
        { Year: "2016", Months: "Jul-Aug", Accidents: 3, Fatalities: 1 },
        { Year: "2016", Months: "Sep-Oct", Accidents: 3, Fatalities: 4 },
        { Year: "2016", Months: "Nov-Dec", Accidents: 4, Fatalities: 126 },
        { Year: "2015", Months: "Jan-Feb", Accidents: 4, Fatalities: 45 },
        { Year: "2015", Months: "Mar-Apr", Accidents: 5, Fatalities: 152 },
        { Year: "2015", Months: "May-Jun", Accidents: 0, Fatalities: 0 },
        { Year: "2015", Months: "Jul-Aug", Accidents: 4, Fatalities: 54 },
        { Year: "2015", Months: "Sep-Oct", Accidents: 5, Fatalities: 243 },
        { Year: "2015", Months: "Nov-Dec", Accidents: 2, Fatalities: 45 }
      ],
      dataSourceSettings: {
        isJsonData: true,
        adaptorType: "Cell",
        xDataMapping: "Year",
        yDataMapping: "Months",
        bubbleDataMapping: { size: "Accidents", color: "Fatalities" }
      },
      titleSettings: {
        text:
          "Commercial Aviation Accidents and Fatalities by year 2012 - 2017",
        textStyle: {
          size: "15px",
          fontWeight: "500",
          fontStyle: "Normal",
          fontFamily: "Segoe UI"
        }
      },
      xAxis: {
        labels: ["2017", "2016", "2015"]
      },
      yAxis: {
        labels: [
          "Jan-Feb",
          "Mar-Apr",
          "May-Jun",
          "Jul-Aug",
          "Sep-Oct",
          "Nov-Dec"
        ]
      },
      paletteSettings: {
        palette: [
          { color: "#C06C84" },
          { color: "#6C5B7B" },
          { color: "#355C7D" }
        ],
        type: "Gradient"
      },
      legendSettings: {
        visible: true
      },
      cellSettings: {
        border: {
          width: 1
        },
        tileType: "Bubble",
        bubbleType: "SizeAndColor"
      }
    };
  },
  provide: {
    heatmap: [Legend, Adaptor, Tooltip]
  },
  methods: {
    tooltipRender: function (args) {
      args.content = [
        "Year " +
        " : " +
        args.xLabel +
        "<br/>" +
        "Months " +
        " : " +
        args.yLabel +
        "<br/>" +
        "Accidents " +
        " : " +
        args.value[0].bubbleData +
        "<br/>" +
        "Fatalities " +
        " : " +
        args.value[1].bubbleData
      ];
    }
  }
};
</script>