logo

/github|v4.4.3

Class

new GaugeChart(props)

EXTENDS
  • Chart
PARAMETERS
NameTypeDescription

props

Object

PROPERTIES
NameTypeDescription

el

HTMLElement

The target element to create chart.

options

[ Object ]

Options for making Gauge Chart.

PROPERTIES
NameTypeDescription

chart

[ Object ]

PROPERTIES
NameTypeDescription

title

[ stringObject ]

Chart title text or options.

animation

[ booleanObject ]

Whether to use animation and duration when rendering the initial chart.

width

[ numberstring ]

Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.

height

[ numberstring ]

Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.

series

[ Object ]

PROPERTIES
NameTypeDescription

selectable

boolean = false

Whether to make selectable series or not.

dataLabels

[ Object ]

Set the visibility, location, and formatting of dataLabel. For specific information, refer to the Gauge Chart guide on github.

angleRange

[ Array ]

The range of angles to which the circle will be drawn. It is specified by putting number in start and end.

clockwise

[ boolean ]

Whether it will be drawn clockwise.

solid

[ booleanObject ]

When this option is set, the radial bar is displayed. It can be used when there is one series data. The default value is 'false'.

circularAxis

[ Object ]

PROPERTIES
NameTypeDescription

title

[ stringObject ]

Axis title.

tick

[ Object ]

Option to adjust tick interval.

label

[ Object ]

Option to adjust label interval.

scale

[ Object ]

Option to adjust axis minimum, maximum, step size.

plot

[ Object ]

PROPERTIES
NameTypeDescription

width

[ number ]

Width of plot.

height

[ number ]

Height of plot.

bands

[ Array ]

Plot bands information. For specific information, refer to the Gauge Chart guide on github.

exportMenu

[ Object ]

PROPERTIES
NameTypeDescription

visible

[ boolean ]

Whether to show export menu.

filename

[ string ]

File name applied when downloading.

tooltip

[ Object ]

PROPERTIES
NameTypeDescription

offsetX

[ number ]

Offset value to move title horizontally.

offsetY

[ number ]

Offset value to move title vertically.

formatter

[ Function ]

Function to format data value.

template

[ Function ]

Function to create custom template. For specific information, refer to the Tooltip guide on github.

responsive

[ Object ]

Rules for changing chart options. For specific information, refer to the Responsive guide on github.

PROPERTIES
NameTypeDescription

animation

[ booleanObject ]

Animation duration when the chart is modified.

rules

[ Array ]

Rules for the Chart to Respond.

theme

[ Object ]

Chart theme options. For specific information, refer to the Gauge Chart guide on github.

PROPERTIES
NameTypeDescription

chart

[ Object ]

Chart font theme.

series

[ Object ]

Series theme.

title

[ Object ]

Title theme.

circularAxis

[ Object ]

Circular Axis theme.

tooltip

[ Object ]

Tooltip theme.

exportMenu

[ Object ]

ExportMenu theme.

plot

[ Object ]

Plot Theme.

data

Object

Data for making Gauge Chart.

PROPERTIES
NameTypeDescription

categories

[ Array ]

Categories.

series

Array.<Object>

Series data.

PROPERTIES
NameTypeDescription

name

string

Series name.

data

number

Series data.

Instance Methods

addData(data, category)

Add data.

PARAMETERS
NameTypeDescription

data

Array

Array of data to be added.

category

[ string ]

Category to be added.

EXAMPLES
// without categories
chart.addData([10], '6');

// with categories
chart.addData([10], '6');

addPlotBand(data)

Add plot band.

PARAMETERS
NameTypeDescription

data

Object

Plot info.

PROPERTIES
NameTypeDescription

range

Array.<stringnumber>

The range to be drawn.

color

string

Plot band color.

id

[ string ]

Plot id. The value on which the removePlotBand is based.

EXAMPLES
chart.addPlotBand({
  range: [10, 20],
  color: '#00ff22',
  id: 'plot-1',
});

addSeries(data)

Add series.

PARAMETERS
NameTypeDescription

data

Object

Data to be added.

PROPERTIES
NameTypeDescription

name

string

Series name.

data

Array.<number|Array.<number>>

Array of data to be added.

EXAMPLES
chart.addSeries({
  name: 'newSeries',
  data: [10, 20],
});

hideSeriesDataLabel()

Hide series data label.

EXAMPLES
chart.hideSeriesDataLabel();

hideTooltip()

Hide tooltip.

EXAMPLES
chart.hideTooltip();

removePlotBand(id)

Remove plot band with id.

PARAMETERS
NameTypeDescription

id

string

id of the plot band to be removed

EXAMPLES
chart.removePlotBand('plot-1');

setData(data)

Convert the chart data to new data.

PARAMETERS
NameTypeDescription

data

Object

Data to be set.

EXAMPLES
chart.setData({
  categories: ['1', '2', '3'],
  series: [
    {
      name: 'new series',
      data: [1, 2, 3],
    },
    {
      name: 'new series2',
      data: [4, 5, 6],
    }
  ]
});

setOptions(options)

Convert the chart options to new options.

PARAMETERS
NameTypeDescription

options

Object

Chart options.

EXAMPLES
chart.setOptions({
  chart: {
    width: 500,
    height: 500,
    title: 'Olympic Medals',
  },
  series: {
    selectable: true
  }
});

showSeriesDataLabel()

Show series data label.

EXAMPLES
chart.showSeriesDataLabel();

showTooltip(seriesInfo)

Show tooltip.

PARAMETERS
NameTypeDescription

seriesInfo

Object

Information of the series for the tooltip to be displayed.

PROPERTIES
NameTypeDescription

index

number

Index of data within series.

EXAMPLES
chart.showTooltip({index: 1});

updateOptions(options)

Update chart options.

PARAMETERS
NameTypeDescription

options

Object

Chart options.

EXAMPLES
chart.updateOptions({
  chart: {
    title: 'Olympic Medals',
  }
});
Resizable