API information regarding each chart is not addressed in this document. Refer to the API Guide.
There are two different ways to create the Bubble chart. The Bubble chart can be created through the constructor function or the static function. The two methods both result in returning an instance of the chart. The HTML element in which the chart is drawn el
, data data
, and the options object options
are taken as parameters. If the element in which the chart is drawn contains elements other than the chart itself, it may unintentionally affect the chart. Therefore, it is recommended that you use an empty HTML element.
import { BubbleChart } from '@toast-ui/chart';
const chart = new BubbleChart({el, data, options});
// or
import Chart from '@toast-ui/chart';
const chart = Chart.bubbleChart({el, data, options});
The data is entered as a series
. Each series must be completed with the name
and the data
, and the data must include x
,y
coordinates, radius r
, and the label label
.
const data = {
series: [
{
name: 'Africa',
data: [
{ x: 30, y: 100, r: 10, label: 'Morocco' },
{ x: 40, y: 200, r: 30, label: 'Egypt' },
],
},
{
name: 'America',
data: [
{ x: 60, y: 40, r: 50, label: 'Canada' },
{ x: 50, y: 300, r: 10, label: 'United States' },
],
},
{
name: 'Asia',
data: [
{ x: 10, y: 150, r: 20, label: 'Korea, South' },
{ x: 20, y: 200, r: 30, label: 'Singapore' },
],
},
],
}
Each series
can have visible
option. The visible
option determines whether the series is displayed when the chart is first drawn. The default is true
.
const data = {
series: [
{
name: 'Africa',
data: [
{ x: 30, y: 100, r: 10, label: 'Morocco' },
{ x: 40, y: 200, r: 30, label: 'Egypt' },
],
visible: false,
},
{
name: 'America',
data: [
{ x: 60, y: 40, r: 50, label: 'Canada' },
{ x: 50, y: 300, r: 10, label: 'United States' },
],
},
{
name: 'Asia',
data: [
{ x: 10, y: 150, r: 20, label: 'Korea, South' },
{ x: 20, y: 200, r: 30, label: 'Singapore' },
],
},
],
}
If you create a chart by applying the above option, you can see that the checkbox is unchecked.
options
should be used as an object.
type options = {
chart?: {
//...
}
xAxis?: {
//...
}
yAxis?: {
//...
}
legend?: {
//...
}
exportMenu?: {
//...
}
tooltip?: {
//...
}
responsive?: {
//...
}
theme?: {
// More explanations in the `theme` chapter.
}
circleLegend?: {
visible?: boolean;
}
series?: {
selectable?: boolean;
}
}
Common options that can be used with this chart are not addressed in this document. Refer to the respective options guide. (Links:
chart
Options, Axis, Legend, Export, Tooltip,responsive
Options, Live Update )
- default:
false
Makes the series selectable.
const options = {
series: {
selectable: true
}
};
selectable
option, accompanied by on
API's selectSeries
and unselectSeries
, grants further control over the series.
The Bubble chart can include a circle legend as shown in the image above. To make the legend invisible, use the circleLegend.visible
option.
const options = {
circleLegend: {
visible: false,
},
}
The following is a list of themes that can be modified in the Bubble chart.
interface BubbleChartSeriesTheme {
borderWidth?: number;
borderColor?: string;
colors?: string[];
select?: {
color?: string;
borderColor?: string;
borderWidth?: number;
};
hover?: {
color?: string;
borderColor?: string;
borderWidth?: number;
}
}
Name | Type | Details |
---|---|---|
borderWidth | number | The width of the series border |
borderColor | string | The color of the series border |
colors | string[] | The color of the series |
select | object | The style that is applied to the line when the series is selected and the series.selectable is set to true . |
hover | object | The style that is applied when the user hovers over the data |
The theme can be added through the theme
value in the options object. For example, let's change the border width and the border color for a selected series.
const options = {
theme: {
series: {
borderWidth: 4,
borderColor: '#aabbcc'
}
}
}
The result of the above option is shown as shown below.