logo

/github|v4.6.1

Class

new ColumnLineChart(props)

EXTENDS
  • Chart
PARAMETERS
NameTypeDescription

props

Object

PROPERTIES
NameTypeDescription

el

HTMLElement

The target element to create chart.

options

[ Object ]

Options for making ColumnLine 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 ]

Write common options in the upper depth and separate options to be applied to each chart.

PROPERTIES
NameTypeDescription

line

[ Object ]

Options to be applied to the line chart. 'spline', 'showDot', 'dataLabels' is available. For specific information, refer to the Line Chart guide on github.

column

[ Object ]

Options to be applied to the column chart. 'barWidth', 'stack', 'dataLabels' is available. For specific information, refer to the Column Chart guide on github.

selectable

boolean = false

Whether to make selectable series or not.

rangeSelectable

boolean = false

Whether to use range selection feature or not.

eventDetectType

[ string ]

Event detect type. 'near', 'nearest', 'grouped', 'point' is available.

shift

boolean = false

Whether to use shift when addData or not.

dataLabels

[ Object ]

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

xAxis

[ Object ]

PROPERTIES
NameTypeDescription

title

[ stringObject ]

Axis title.

pointOnColumn

boolean = false

Whether to move the start of the chart to the center of the column.

rotateLabel

boolean = true

Whether to allow axis label rotation.

date

[ booleanObject ]

Whether the x axis label is of date type. Format option used for date type. Whether the x axis label is of date type. If use date type, format option used for date type.

tick

[ Object ]

Option to adjust tick interval.

label

[ Object ]

Option to adjust label interval.

scale

[ Object ]

Option to adjust axis minimum, maximum, step size.

width

[ number ]

Width of xAxis.

height

[ number ]

Height of xAxis.

yAxis

[ ObjectArray.<Object> ]

If this option is an array type, use the secondary y axis.

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.

width

[ number ]

Width of yAxis.

height

[ number ]

Height of yAxis.

plot

[ Object ]

PROPERTIES
NameTypeDescription

width

[ number ]

Width of plot.

height

[ number ]

Height of plot.

visible

[ boolean ]

Whether to show plot line.

lines

[ Array ]

Plot lines information. For specific information, refer to the Plot guide on github.

bands

[ Array ]

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

legend

[ Object ]

PROPERTIES
NameTypeDescription

align

[ string ]

Legend align. 'top', 'bottom', 'right', 'left' is available.

showCheckbox

[ string ]

Whether to show checkbox.

visible

[ boolean ]

Whether to show legend.

width

[ number ]

Width of legend.

item

[ Object ]

and options of the legend item. For specific information, refer to the Legend 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.

lang

[ Object ]

Options for changing the text displayed on the chart or i18n languages.

PROPERTIES
NameTypeDescription

noData

[ Object ]

No Data Layer Text.

theme

[ Object ]

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

PROPERTIES
NameTypeDescription

chart

[ Object ]

Chart font theme.

noData

[ Object ]

No Data Layer Text theme.

series

[ Object ]

Series theme. Each theme to be applied to the two charts should be written separately.

title

[ Object ]

Title theme.

xAxis

[ Object ]

X Axis theme.

yAxis

[ ObjectArray.<Object> ]

Y Axis theme. In the case of an arrangement, the first is the main axis and the second is the theme for the secondary axis.

legend

[ Object ]

Legend theme.

tooltip

[ Object ]

Tooltip theme.

plot

[ Object ]

Plot theme.

exportMenu

[ Object ]

ExportMenu theme.

data

Object

Data for making ColumnLine Chart.

PROPERTIES
NameTypeDescription

categories

Array.<string>

Categories.

series

Array.<Object>

Series data.

PROPERTIES
NameTypeDescription

line

Array.<Object>

Line series data. Coordinate types data is not possible.

column

Array.<Object>

Column series data.

series

categories

Instance Methods

addData(data, category, chartType)

Add data.

PARAMETERS
NameTypeDescription

data

Array

Array of data to be added.

category

string

Category to be added.

chartType

string

Which type of chart to add.

EXAMPLES
chart.addData([10, 20], '6', 'line');

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({
  value: [2, 4],
  color: '#00ff22',
  id: 'plot-1',
});

addPlotLine(data)

Add plot line.

PARAMETERS
NameTypeDescription

data

Object

Plot info.

PROPERTIES
NameTypeDescription

value

stringnumber

The value where the plot line will be drawn.

color

string

Plot line color.

id

[ string ]

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

EXAMPLES
chart.addPlotLine({
  value: 2,
  color: '#00ff22',
  id: 'plot-1',
});

addSeries(data, dataInfo)

Add series.

PARAMETERS
NameTypeDescription

data

Object

Data to be added.

PROPERTIES
NameTypeDescription

name

string

Series name.

data

Array.<number>

Array of data to be added.

dataInfo

Object

Which type of chart to add.

PROPERTIES
NameTypeDescription

chartType

Object

Chart type.

EXAMPLES
chart.addSeries(
  {
    name: 'newSeries',
    data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110],
  },
  {
    chartType: 'line'
  });

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');

removePlotLine(id)

Remove plot line with id.

PARAMETERS
NameTypeDescription

id

string

Id of the plot line to be removed

EXAMPLES
chart.removePlotLine('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: {
    column: [
      {
        name: 'A',
        data: [1, 2, 3],
      }
    ],
    line: [
      {
        name: 'B',
        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: 'auto',
    title: 'Energy Usage',
  },
  xAxis: {
    title: 'Month',
    date: { format: 'yy/MM' },
  },
  yAxis: {
    title: 'Energy (kWh)',
  },
  series: {
    line: {
      showDot: true,
    },
    selectable: true,
  },
  tooltip: {
    formatter: (value) => `${value}kWh`,
  },
});

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

seriesIndex

number

Index of series.

index

number

Index of data within series.

chartType

string

Specify which chart to select.

EXAMPLES
chart.showTooltip({index: 1, seriesIndex: 2, chartType: 'column'});

updateOptions(options)

Update chart options.

PARAMETERS
NameTypeDescription

options

Object

Chart options

EXAMPLES
chart.updateOptions({
  chart: {
    height: 'auto',
    title: 'Energy Usage',
  },
  series: {
    line: {
      showDot: true,
    },
  },
});
Resizable