Skip to content

v4.1.0
Compare
Choose a tag to compare
@jung-han jung-han released this 18 Feb 07:22
· 116 commits to main since this release
v4.1.0
ebe645e

New Features

A new chart type, the RadialBar chart announced πŸŽ‰

It supports options such as clockwise, angleRange, radiusRange, etc. Use these options to display your own charts. This new chart has circularAxis, verticalAxis. In addition, Radar Chart has improved the concept of the previously ambiguous axis, and uses CircularAxis and verticalAxis.

selectable and eventDetectType options
The selectable option makes the series selectable and defines how to detect the series through the mouse with eventDetectType.

const chart = new RadialBarChart({el, data, {
  series: {
    selectable: true,          // default: false
    eventDetectType: 'grouped' // default: 'point',
  }
}});
point grouped
radialbar-point radialbar-grouped

clockwise options
Determines the direction in which the series is painted.

const chart = new RadialBarChart({el, data, {
  series: {
    clockwise: false,          // default: true
  }
}});
clockwise counter clockwise
radialbar-clockwise radialbar-counterclockwise

angleRange options
The angleRange uses start and end options to determine the range of the arc.

const chart = new RadialBarChart({el, data, {
  ...
  series: {
    angleRange: {
      start: 45,
      end: 315
    }
  }
}});
angleRange with theme
radialBar-angleRange radialbar-angleRange-theme

|

radiusRange options
The radiusRange uses inner and outer options to define the radii of inner and outer circles.

const chart = new RadialBarChart({el, data, {
  series: {
    radiusRange: {
      inner: 50,
      outer: '90%'
    }
  }
}});
radiusRange with theme
radialbar-radiusRange radialbar-radiusrange-theme

Guide

addOutlier API (#557)

Using addOutlier(), you can add new outlier data to the BoxPlot chart.

public addOutlier(seriesIndex: number, outliers: number[][])

/* example */
const boxPlotChart = new BoxPlotChart({ el, data, options });

boxPlotChart.addOutlier(1, [[1, 50], [3, 30]]);

Data visible options

  • Compatible with: Line, Area, LineArea, Bar, Column, ColumnLine, Bullet, BoxPlot, Scatter, LineScatter, Bubble, Pie, NestedPie, Radar

⚠️ RadialBar chart will be supported in 4.1.1

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. Both basic chart and range chart use the same way.

const data = {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
  series: [
    {
      name: 'Seoul',
      data: [20, 40, 25, 50, 15, 45],
      visible: false,
    },
  ],
}

Bug Fixes

  • Fix bug where colors are not properly exposed when there are more than 27 series(#555)
  • Automatically change the legend layout when the number of series is large.(#562)
  • Fix bug where the container's width and height were not specified and when 'auto' was used(#568)
  • Remove alias used when importing types(#561)
  • Fix bug that the position was not properly exposed when scrolling the export menu.(#578)
  • Fix bug where the data of the selected series was not provide selectSeries()(#582)
Assets 2