jQuery Chart - Bubble Series
The Bubble series type visualizes data as individual points of different sizes called "bubbles". Because Bubble series have the additional size characteristic, they can convey more information than, for example, Line or Scatter series.
Assign "bubble" to the series[].type property to specify the Bubble series type. You can configure:
- Each series individually using the series array;
- All series in the Chart using the commonSeriesSettings object;
- All Bubble series using the commonSeriesSettings.bubble object.
Note that Bubble series require an additional data field that provides size values. Assign its name to the series[].sizeField property. Based on the size values, the UI component calculates the actual bubble sizes in pixels, ranging between minBubbleSize and maxBubbleSize.
jQuery
JavaScript
$(function () {
$("#chartContainer").dxChart({
series: [{
type: "bubble",
sizeField: "size"
}, {
// ...
}],
commonSeriesSettings: {
bubble: { ... }
},
minBubbleSize: 14, // in pixels
maxBubbleSize: 0.3 // in fractions of the UI component's height or width, depending on which is smaller
});
});Angular
HTML
TypeScript
<dx-chart
[minBubbleSize]="14"
[maxBubbleSize]="0.3">
<dxi-series type="bubble" sizeField="size"></dxi-series>
<dxi-series ... ></dxi-series>
...
<dxo-common-series-settings>
<dxo-bubble ... ></dxo-bubble>
</dxo-common-series-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})Vue
App.vue
<template>
<DxChart ...
:min-bubble-size="14"
:max-bubble-size="0.3">
<DxSeries
type="bubble"
size-field="size"
/>
<DxSeries ... />
...
<DxCommonSeriesSettings :bubble="bubbleSettings"/>
</DxChart>
</template>
<script>
import DxChart, {
DxSeries,
DxCommonSeriesSettings
} from 'devextreme-vue/chart';
export default {
components: {
DxChart,
DxSeries,
DxCommonSeriesSettings
},
data() {
return {
bubbleSettings: { ... }
};
}
}
</script>React
App.js
import React from 'react';
import Chart, {
Series,
CommonSeriesSettings
} from 'devextreme-react/chart';
const bubbleSettings = { ... };
class App extends React.Component {
render() {
return (
<Chart ...
minBubbleSize={14}
maxBubbleSize={0.3}>
<Series
type="bubble"
sizeField="size"
/>
<Series ... />
...
<CommonSeriesSettings bubble={bubbleSettings} />
</Chart>
);
}
}
export default App;Refer to the BubbleSeries section of the API Reference for a full list of properties available to a Bubble series.
See Also
Feedback