@toast-ui/chart - npm Package Compare versions

Comparing version 4.0.0-beta.4 to 4.0.0-beta.5

dist/esm/brushes/basic.d.ts

 import { ClipRectAreaModel, PathRectModel, CircleModel, RectModel } from "../../types/components/series";
 import { LineModel } from "../../types/components/axis";
-export declare type CircleStyleName = 'default' | 'hover' | 'plot';
+export declare type CircleStyleName = 'default' | 'plot';
 export declare type RectStyleName = 'shadow';
@@ -5,0 +5,0 @@ export declare function clipRectArea(ctx: CanvasRenderingContext2D, clipRectAreaModel: ClipRectAreaModel): void;

dist/esm/brushes/basic.js

@@ -7,8 +7,2 @@ import { makeStyleObj, setLineDash, fillStyle, strokeWithOptions } from "../helpers/style";
     },
-    hover: {
-        shadowColor: 'rgba(0, 0, 0, 0.3)',
-        shadowBlur: 2,
-        shadowOffsetY: 2,
-        lineWidth: 2,
-    },
     plot: {
@@ -62,5 +56,2 @@ lineWidth: 1,
     fillStyle(ctx, color);
-    if (ctx.shadowColor) {
-        ctx.shadowColor = 'transparent';
-    }
     strokeWithOptions(ctx, { lineWidth, strokeStyle });
@@ -92,8 +83,6 @@ ctx.closePath();
         ctx.fillRect(x - thickness, y - thickness, width + thickness * 2, height + thickness * 2);
+        ctx.shadowColor = 'rgba(0, 0, 0, 0)'; // reset shadow color
     }
-    if (ctx.shadowColor) {
-        ctx.shadowColor = 'transparent';
-    }
     ctx.rect(x, y, width, height);
     fillStyle(ctx, color);
 }

dist/esm/brushes/label.js

@@ -110,2 +110,3 @@ import { makeStyleObj, fillStyle, strokeWithOptions } from "../helpers/style";
     if (text) {
+        ctx.shadowColor = 'rgba(0, 0, 0, 0)';
         label(ctx, {
@@ -164,5 +165,2 @@ type: 'label',
     }
-    if (ctx.shadowColor) {
-        ctx.shadowColor = 'transparent';
-    }
     if (strokeStyle) {
@@ -169,0 +167,0 @@ strokeWithOptions(ctx, { strokeStyle, lineWidth });

dist/esm/charts/areaChart.js

@@ -20,2 +20,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as lineSeriesBrush from "../brushes/lineSeries";
@@ -225,2 +226,3 @@ import * as basicBrush from "../brushes/basic";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -227,0 +229,0 @@ this.componentManager.add(Plot);

dist/esm/charts/barChart.js

@@ -21,2 +21,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -222,2 +223,3 @@ import * as axisBrush from "../brushes/axis";
         const stackChart = !!((_a = this.store.initStoreState.options.series) === null || _a === void 0 ? void 0 : _a.stack);
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -224,0 +226,0 @@ this.componentManager.add(Plot);

dist/esm/charts/boxPlotChart.js

@@ -16,2 +16,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrushes from "../brushes/basic";
@@ -189,2 +190,3 @@ import * as axisBrushes from "../brushes/axis";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -191,0 +193,0 @@ this.componentManager.add(Plot);

dist/esm/charts/bubbleChart.js

@@ -17,2 +17,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -191,2 +192,3 @@ import * as axisBrush from "../brushes/axis";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -193,0 +195,0 @@ this.componentManager.add(Plot);

dist/esm/charts/bulletChart.js

@@ -17,2 +17,3 @@ import Chart from "./chart";
 import DataLabels from "../component/dataLabels";
+import Background from "../component/background";
 import * as basicBrushes from "../brushes/basic";
@@ -199,2 +200,3 @@ import * as axisBrushes from "../brushes/axis";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -201,0 +203,0 @@ this.componentManager.add(Plot);

dist/esm/charts/columnChart.js

@@ -20,2 +20,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -222,2 +223,3 @@ import * as axisBrush from "../brushes/axis";
         const stackChart = !!((_a = this.store.initStoreState.options.series) === null || _a === void 0 ? void 0 : _a.stack);
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -224,0 +226,0 @@ this.componentManager.add(Plot);

dist/esm/charts/columnLineChart.js

@@ -21,2 +21,3 @@ import Chart from "./chart";
 import Tooltip from "../component/tooltip";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -236,2 +237,3 @@ import * as axisBrush from "../brushes/axis";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -238,0 +240,0 @@ this.componentManager.add(Plot);

dist/esm/charts/heatmapChart.js

@@ -15,2 +15,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -235,2 +236,3 @@ import * as legendBrush from "../brushes/legend";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -237,0 +239,0 @@ this.componentManager.add(SpectrumLegend);

dist/esm/charts/lineAreaChart.d.ts

@@ -101,3 +101,3 @@ import Chart, { AddSeriesDataInfo, SelectSeriesInfo } from "./chart";
      */
-    addData: (data: AreaSeriesDataType[] | LineSeriesDataType[], category: string, chartType: "area" | "line") => void;
+    addData: (data: LineSeriesDataType[] | AreaSeriesDataType[], category: string, chartType: "area" | "line") => void;
     /**
@@ -104,0 +104,0 @@ * Add series.

dist/esm/charts/lineAreaChart.js

@@ -21,2 +21,3 @@ import Chart from "./chart";
 import ResetButton from "../component/resetButton";
+import Background from "../component/background";
 import * as lineSeriesBrush from "../brushes/lineSeries";
@@ -252,2 +253,3 @@ import * as basicBrush from "../brushes/basic";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -254,0 +256,0 @@ this.componentManager.add(Plot);

dist/esm/charts/lineChart.js

@@ -19,2 +19,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as lineSeriesBrush from "../brushes/lineSeries";
@@ -227,2 +228,3 @@ import * as basicBrush from "../brushes/basic";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -229,0 +231,0 @@ this.componentManager.add(Plot);

dist/esm/charts/lineScatterChart.js

@@ -28,2 +28,3 @@ import Chart from "./chart";
 import * as scatterSeriesBrush from "../brushes/scatterSeries";
+import Background from "../component/background";
 /**
@@ -219,2 +220,3 @@ * @class
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -221,0 +223,0 @@ this.componentManager.add(Plot);

dist/esm/charts/nestedPieChart.js

@@ -10,2 +10,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -168,2 +169,3 @@ import * as legendBrush from "../brushes/legend";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -170,0 +172,0 @@ this.componentManager.add(Legend);

dist/esm/charts/pieChart.js

@@ -10,2 +10,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -164,2 +165,3 @@ import * as legendBrush from "../brushes/legend";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -166,0 +168,0 @@ this.componentManager.add(Legend);

dist/esm/charts/radarChart.js

@@ -14,2 +14,3 @@ import Chart from "./chart";
 import RadialAxis from "../component/radialAxis";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -171,2 +172,3 @@ import * as legendBrush from "../brushes/legend";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -173,0 +175,0 @@ this.componentManager.add(Legend);

dist/esm/charts/scatterChart.js

@@ -16,2 +16,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -23,2 +24,21 @@ import * as axisBrush from "../brushes/axis";
 import * as scatterSeriesBrush from "../brushes/scatterSeries";
+import { isNull } from "../helpers/utils";
+import { getCoordinateXValue, getCoordinateYValue } from "../helpers/coordinate";
+function clearUnnecessaryData(scatterSeries) {
+    return scatterSeries.map((series) => {
+        const exist = {};
+        return Object.assign(Object.assign({}, series), { data: series.data
+                .filter((datum) => !isNull(datum))
+                .reduce((acc, cur) => {
+                const x = getCoordinateXValue(cur);
+                const y = getCoordinateYValue(cur);
+                const key = `${x}-${y}`;
+                if (!exist[key]) {
+                    exist[key] = true;
+                    return [...acc, cur];
+                }
+                return acc;
+            }, []) });
+    });
+}
 /**
@@ -100,3 +120,3 @@ * @class
             series: {
-                scatter: props.data.series,
+                scatter: clearUnnecessaryData(props.data.series),
             },
@@ -190,2 +210,3 @@ categories: (_a = props.data) === null || _a === void 0 ? void 0 : _a.categories,
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -192,0 +213,0 @@ this.componentManager.add(Plot);

dist/esm/charts/treemapChart.js

@@ -13,2 +13,3 @@ import Chart from "./chart";
 import SelectedSeries from "../component/selectedSeries";
+import Background from "../component/background";
 import * as basicBrush from "../brushes/basic";
@@ -168,2 +169,3 @@ import * as legendBrush from "../brushes/legend";
         super.initialize();
+        this.componentManager.add(Background);
         this.componentManager.add(Title);
@@ -170,0 +172,0 @@ this.componentManager.add(SpectrumLegend);

dist/esm/component/areaSeries.js

@@ -356,3 +356,3 @@ import Component from "./component";
             points.forEach((point, index) => {
-                var _a, _b;
+                var _a, _b, _c;
                 if (isNull(point)) {
@@ -368,3 +368,9 @@ return;
                 }
-                responderModel.push(Object.assign(Object.assign({}, model), { radius: hoverDotTheme.radius, color: (_b = hoverDotTheme.color, (_b !== null && _b !== void 0 ? _b : getRGBA(color, 1))), style: ['default', 'hover'] }));
+                const modelColor = (_b = hoverDotTheme.color, (_b !== null && _b !== void 0 ? _b : getRGBA(color, 1)));
+                responderModel.push(Object.assign(Object.assign({}, model), { radius: hoverDotTheme.radius, color: modelColor, style: [
+                        {
+                            lineWidth: hoverDotTheme.borderWidth,
+                            strokeStyle: (_c = hoverDotTheme.borderColor, (_c !== null && _c !== void 0 ? _c : getRGBA(modelColor, 0.5))),
+                        },
+                    ] }));
             });
@@ -401,3 +407,5 @@ });
         });
-        this.activatedResponders = circleModels.slice(0, circleModels.length / 2); // for rendering unique tooltip data
+        this.activatedResponders = this.isRangeChart
+            ? circleModels.slice(0, circleModels.length / 2) // for rendering unique tooltip data
+            : circleModels;
     }
@@ -442,3 +450,6 @@ onMousemoveNearestType(responders, mousePositions) {
         const { radius, color, borderWidth, borderColor } = this.theme.select.dot;
-        return models.map((model) => (Object.assign(Object.assign({}, model), { radius, color: (color !== null && color !== void 0 ? color : model.color), style: ['hover', { lineWidth: borderWidth, strokeStyle: borderColor }] })));
+        return models.map((model) => {
+            const modelColor = (color !== null && color !== void 0 ? color : model.color);
+            return Object.assign(Object.assign({}, model), { radius, color: modelColor, style: [{ lineWidth: borderWidth, strokeStyle: (borderColor !== null && borderColor !== void 0 ? borderColor : getRGBA(modelColor, 0.5)) }] });
+        });
     }
@@ -445,0 +456,0 @@ onClick({ responders, mousePosition }) {

dist/esm/component/axis.d.ts

 import Component from "./component";
-import Painter from "../painter";
 import { ChartState, Options, ViewAxisLabel, AxisData } from "../../types/store/store";
@@ -35,3 +34,2 @@ import { LabelModel, TickModel, LineModel, AxisModels } from "../../types/components/axis";
     getLabelTextAlign(needRotateLabel?: boolean): "left" | "right" | "center";
-    beforeDraw(painter: Painter): void;
     private isRightSide;
@@ -38,0 +36,0 @@ private getYAxisXPoint;

dist/esm/component/axis.js

@@ -69,2 +69,3 @@ import Component from "./component";
         let lineModel;
+        const { color: strokeStyle, width: lineWidth } = this.theme;
         if (this.yAxisComponent) {
@@ -78,2 +79,4 @@ const x = this.getYAxisXPoint();
                 y2: crispPixel(this.axisSize),
+                strokeStyle,
+                lineWidth,
             };
@@ -88,2 +91,4 @@ }
                 y2: zeroPixel,
+                strokeStyle,
+                lineWidth,
             };
@@ -158,6 +163,2 @@ }
     }
-    beforeDraw(painter) {
-        painter.ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
-        painter.ctx.lineWidth = 1;
-    }
     isRightSide() {
@@ -164,0 +165,0 @@ return this.name === AxisType.SECONDARY_Y;

dist/esm/component/bubbleSeries.js

@@ -99,3 +99,3 @@ import { getCoordinateXValue, getCoordinateYValue } from "../helpers/coordinate";
         }
-        this.responders = seriesModel.map((m, index) => (Object.assign(Object.assign({}, m), { type: 'circle', detectionSize: 0, radius: m.radius + MINIMUM_DETECTING_AREA_RADIUS, color: getRGBA(m.color, 0.85), style: ['default', 'hover', { lineWidth: 2 }], data: tooltipModel[index], index })));
+        this.responders = seriesModel.map((m, index) => (Object.assign(Object.assign({}, m), { type: 'circle', detectionSize: 0, radius: m.radius + MINIMUM_DETECTING_AREA_RADIUS, color: getRGBA(m.color, 0.85), data: tooltipModel[index], index })));
     }
@@ -102,0 +102,0 @@ renderBubblePointsModel(seriesRawData, scale) {

dist/esm/component/bulletSeries.d.ts

@@ -22,3 +22,2 @@ import Component from "./component";
 declare type BulletTooltipRectMap = Record<string, (BulletRectResponderModel | MarkerResponderModel)[]>;
-export declare function isBulletSeries(seriesName: string): boolean;
 export default class BulletSeries extends Component {
@@ -25,0 +24,0 @@ models: BulletSeriesModels;

dist/esm/component/bulletSeries.js

@@ -30,5 +30,2 @@ import Component from "./component";
 }
-export function isBulletSeries(seriesName) {
-    return seriesName === 'bullet';
-}
 export default class BulletSeries extends Component {
@@ -35,0 +32,0 @@ constructor() {

dist/esm/component/component.d.ts

@@ -6,3 +6,3 @@ import { ChartState, Options } from "../../types/store/store";
 import EventEmitter from "../eventEmitter";
-import { AreaSeriesModels, BoxSeriesModels, CircleSeriesModels, LineSeriesModels, PieSeriesModels, RadarSeriesModels, BoxPlotSeriesModels, ResponderModel, TreemapSeriesModels, HeatmapRectModels, NestedPieSeriesModels, ScatterSeriesModels, BulletSeriesModels } from "../../types/components/series";
+import { AreaSeriesModels, BoxSeriesModels, CircleSeriesModels, LineSeriesModels, PieSeriesModels, RadarSeriesModels, BoxPlotSeriesModels, ResponderModel, TreemapSeriesModels, HeatmapRectModels, NestedPieSeriesModels, ScatterSeriesModels, BulletSeriesModels, BackgroundModel } from "../../types/components/series";
 import { AxisModels, LabelModel, LineModel, RectLabelModel } from "../../types/components/axis";
@@ -20,4 +20,4 @@ import { ExportMenuModels } from "../../types/components/exportMenu";
 import { ResponderSeriesModel } from "./selectedSeries";
-export declare type ComponentType = 'component' | 'series' | 'hoveredSeries' | 'selectedSeries' | 'legend' | 'axis' | 'tooltip' | 'plot' | 'circleLegend' | 'spectrumLegend' | 'dataLabels' | 'title' | 'axisTitle' | 'exportMenu' | 'resetButton' | 'zeroAxis' | 'zoom' | 'backButton';
-declare type ComponentModels = AxisModels | AreaSeriesModels | BoxSeriesModels | CircleSeriesModels | LineSeriesModels | ExportMenuModels | CircleLegendModels | PieSeriesModels | RadarSeriesModels | BoxPlotSeriesModels | ZoomModels | PlotModels | RadarPlotModels | LineModel[] | LabelModel[] | DataLabelModels | LegendModel[] | HoveredSeriesModel | TreemapSeriesModels | ResetButtonModels | SpectrumLegendModels | BackButtonModels | HeatmapRectModels | NestedPieSeriesModels | ResponderSeriesModel | RectLabelModel[] | ScatterSeriesModels | BulletSeriesModels;
+export declare type ComponentType = 'component' | 'series' | 'hoveredSeries' | 'selectedSeries' | 'legend' | 'axis' | 'tooltip' | 'plot' | 'circleLegend' | 'spectrumLegend' | 'dataLabels' | 'title' | 'axisTitle' | 'exportMenu' | 'resetButton' | 'zeroAxis' | 'zoom' | 'backButton' | 'background';
+declare type ComponentModels = AxisModels | AreaSeriesModels | BoxSeriesModels | CircleSeriesModels | LineSeriesModels | ExportMenuModels | CircleLegendModels | PieSeriesModels | RadarSeriesModels | BoxPlotSeriesModels | ZoomModels | PlotModels | RadarPlotModels | LineModel[] | LabelModel[] | DataLabelModels | LegendModel[] | HoveredSeriesModel | TreemapSeriesModels | ResetButtonModels | SpectrumLegendModels | BackButtonModels | HeatmapRectModels | NestedPieSeriesModels | ResponderSeriesModel | RectLabelModel[] | ScatterSeriesModels | BulletSeriesModels | BackgroundModel;
 export default abstract class Component {
@@ -24,0 +24,0 @@ name: string;

dist/esm/component/exportMenu.d.ts

@@ -21,2 +21,3 @@ import Component from "./component";
     theme: Required<ExportMenuTheme>;
+    chartBackgroundColor: string;
     toggleExportMenu: () => void;
@@ -23,0 +24,0 @@ getCanvasExportBtnRemoved: () => HTMLCanvasElement;

dist/esm/component/exportMenu.js

@@ -28,4 +28,6 @@ import Component from "./component";
             const { x, y, height: h, width: w } = this.rect;
-            ctx.fillStyle = '#ffffff';
-            ctx.fillRect(x, y, w, h);
+            ['#fff', this.chartBackgroundColor].forEach((color) => {
+                ctx.fillStyle = color;
+                ctx.fillRect(x, y, w, h);
+            });
             return canvas;
@@ -90,2 +92,3 @@ };
         }
+        this.chartBackgroundColor = theme.chart.backgroundColor;
         this.theme = theme.exportMenu;
@@ -92,0 +95,0 @@ this.data = { series, categories: rawCategories };

dist/esm/component/heatmapSeries.d.ts

@@ -30,3 +30,3 @@ import Component from "./component";
             name?: string | undefined;
-        } & Partial<import("../../types/components/tooltip").TooltipData>) | undefined;
+        } & Partial<import("../../types").TooltipDataInfo>) | undefined;
     } & {
@@ -48,3 +48,3 @@ style: string[];
             name?: string | undefined;
-        } & Partial<import("../../types/components/tooltip").TooltipData>) | undefined;
+        } & Partial<import("../../types").TooltipDataInfo>) | undefined;
     } & {
@@ -51,0 +51,0 @@ style: string[];

dist/esm/component/lineSeries.js

@@ -224,3 +224,3 @@ import Component from "./component";
                 }
-                responderModel.push(Object.assign(Object.assign({}, model), { radius: hoverDotTheme.radius, color: (_b = hoverDotTheme.color, (_b !== null && _b !== void 0 ? _b : getRGBA(color, 1))), style: ['default', 'hover'] }));
+                responderModel.push(Object.assign(Object.assign({}, model), { radius: hoverDotTheme.radius, color: (_b = hoverDotTheme.color, (_b !== null && _b !== void 0 ? _b : getRGBA(color, 1))), style: ['default'] }));
             });
@@ -277,3 +277,6 @@ });
         const { radius, color, borderWidth, borderColor } = this.theme[type].dot;
-        return models.map((model) => (Object.assign(Object.assign({}, model), { radius, color: (color !== null && color !== void 0 ? color : model.color), style: ['hover', { lineWidth: borderWidth, strokeStyle: borderColor }] })));
+        return models.map((model) => {
+            const modelColor = (color !== null && color !== void 0 ? color : model.color);
+            return Object.assign(Object.assign({}, model), { radius, color: modelColor, style: [{ lineWidth: borderWidth, strokeStyle: (borderColor !== null && borderColor !== void 0 ? borderColor : getRGBA(modelColor, 0.5)) }] });
+        });
     }
@@ -280,0 +283,0 @@ onClick({ responders, mousePosition }) {

dist/esm/component/pieSeries.d.ts

@@ -28,2 +28,6 @@ import Component from "./component";
 };
+declare type MaxPieDataLabelSize = {
+    width: number;
+    height: number;
+};
 export default class PieSeries extends Component {
@@ -43,4 +47,4 @@ models: PieSeriesModels;
     getRadiusRangeMap(options: PieChartOptions, pieAlias: string[]): Record<string, RadiusRangeOption>;
-    getRenderOptionsMap(options: PieChartOptions, pieAlias: string[]): Record<string, RenderOptions>;
-    initRenderOptionsMap(options: PieChartOptions, pieAlias: string[]): Record<string, RenderOptions>;
+    getRenderOptionsMap(options: PieChartOptions, pieAlias: string[], maxPieDataLabelSize: MaxPieDataLabelSize): Record<string, RenderOptions>;
+    initRenderOptionsMap(options: PieChartOptions, pieAlias: string[], { width, height }: MaxPieDataLabelSize): Record<string, RenderOptions>;
     getOptions(chartOptions: PieChartOptions, alias?: string): {
@@ -58,3 +62,3 @@ series?: import("../../types/options").PieSeriesOptions | undefined;
     };
-    makeRenderOptions(options: PieChartOptions): RenderOptions;
+    makeRenderOptions(options: PieChartOptions, maxDataLabelWidth?: number, maxDataLabelHeight?: number): RenderOptions;
     renderPieModel(seriesRawData: PieSeriesType[], renderOptions: RenderOptions, pieIndex?: number): SectorModel[];
@@ -61,0 +65,0 @@ makeTooltipResponder(responders: SectorResponderModel[]): {

dist/esm/component/pieSeries.js

@@ -5,7 +5,9 @@ import Component from "./component";
 import { getActiveSeriesMap } from "../helpers/legend";
-import { getDataLabelsOptions } from "../helpers/dataLabels";
+import { getDataLabelsOptions, RADIUS_PADDING } from "../helpers/dataLabels";
 import { getTotalAngle, isSemiCircle, getDefaultRadius, getSemiCircleCenterY, makePieTooltipData, pieTooltipLabelFormatter, } from "../helpers/pieSeries";
-import { calculateSizeWithPercentString, isNumber, isUndefined, isNull } from "../helpers/utils";
+import { calculateSizeWithPercentString, isNumber, isUndefined, isNull, last, } from "../helpers/utils";
 import { pick } from "../helpers/utils";
 import { message } from "../message";
+import { getMaxLabelSize } from "../helpers/axes";
+import { getFont } from "../helpers/style";
 function getCalculatedRadiusRange({ alias, renderOptions, radiusRangeMap, pieIndex, radiusRanges, totalPieAliasCount, }) {
@@ -47,2 +49,29 @@ var _a, _b, _c, _d, _e;
 }
+function getMaxDataLabelSize(seriesNameLabels, options, dataLabelTheme) {
+    var _a, _b;
+    const outerLabels = [
+        {
+            hasOuterLabel: options.visible && options.anchor === 'outer',
+            labels: ['00.00%'],
+            theme: dataLabelTheme,
+        },
+        {
+            hasOuterLabel: ((_a = options.pieSeriesName) === null || _a === void 0 ? void 0 : _a.visible) && ((_b = options.pieSeriesName) === null || _b === void 0 ? void 0 : _b.anchor) === 'outer',
+            labels: seriesNameLabels,
+            theme: dataLabelTheme.pieSeriesName,
+        },
+    ];
+    return outerLabels.reduce((acc, cur) => {
+        const { width, height } = acc;
+        const { hasOuterLabel, labels, theme } = cur;
+        if (hasOuterLabel) {
+            const { maxLabelWidth, maxLabelHeight } = getMaxLabelSize(labels, 0, getFont(theme));
+            return {
+                width: Math.max(maxLabelWidth + RADIUS_PADDING, width),
+                height: Math.max(maxLabelHeight + RADIUS_PADDING, height),
+            };
+        }
+        return acc;
+    }, { width: 0, height: 0 });
+}
 export default class PieSeries extends Component {
@@ -141,2 +170,3 @@ constructor() {
         let seriesModel, tooltipDataModel;
+        const dataLabelsOptions = getDataLabelsOptions(options, this.alias);
         if (nestedPieSeries) {
@@ -146,3 +176,7 @@ const { data } = nestedPieSeries[this.alias];
             const pieIndex = pieAlias.findIndex((alias) => alias === this.alias);
-            const renderOptionsMap = this.getRenderOptionsMap(options, pieAlias);
+            // check the data label of the last Pie series
+            const lastAlias = last(pieAlias);
+            const lastSeries = nestedPieSeries[lastAlias];
+            const maxPieDataLabelSize = getMaxDataLabelSize(lastSeries.data.map(({ name }) => name), getDataLabelsOptions(options, lastAlias), this.theme.dataLabels);
+            const renderOptionsMap = this.getRenderOptionsMap(options, pieAlias, maxPieDataLabelSize);
             seriesModel = this.renderPieModel(data, renderOptionsMap[this.alias], pieIndex);
@@ -153,3 +187,4 @@ tooltipDataModel = makePieTooltipData(data, (_b = categories) === null || _b === void 0 ? void 0 : _b[pieIndex]);
             const pieData = (_c = series.pie) === null || _c === void 0 ? void 0 : _c.data;
-            const renderOptions = this.makeRenderOptions(options);
+            const { width, height } = getMaxDataLabelSize(pieData.map(({ name }) => name), dataLabelsOptions, this.theme.dataLabels);
+            const renderOptions = this.makeRenderOptions(options, width, height);
             seriesModel = this.renderPieModel(pieData, renderOptions);
@@ -164,3 +199,3 @@ tooltipDataModel = makePieTooltipData(pieData, (_d = categories) === null || _d === void 0 ? void 0 : _d[0]);
         }
-        if (getDataLabelsOptions(options, this.alias).visible) {
+        if (dataLabelsOptions.visible) {
             const dataLabelData = seriesModel.map((m) => (Object.assign(Object.assign({}, m), { value: `${pieTooltipLabelFormatter(m.percentValue)}`, theme: this.theme.dataLabels })));
@@ -181,4 +216,4 @@ this.renderDataLabels(dataLabelData, this.alias);
     }
-    getRenderOptionsMap(options, pieAlias) {
-        const renderOptionsMap = this.initRenderOptionsMap(options, pieAlias);
+    getRenderOptionsMap(options, pieAlias, maxPieDataLabelSize) {
+        const renderOptionsMap = this.initRenderOptionsMap(options, pieAlias, maxPieDataLabelSize);
         const radiusRangeMap = this.getRadiusRangeMap(options, pieAlias);
@@ -198,4 +233,4 @@ pieAlias.forEach((alias, pieIndex) => {
     }
-    initRenderOptionsMap(options, pieAlias) {
-        return pieAlias.reduce((acc, alias) => (Object.assign(Object.assign({}, acc), { [alias]: this.makeRenderOptions(this.getOptions(options, alias)) })), {});
+    initRenderOptionsMap(options, pieAlias, { width, height }) {
+        return pieAlias.reduce((acc, alias) => (Object.assign(Object.assign({}, acc), { [alias]: this.makeRenderOptions(this.getOptions(options, alias), width, height) })), {});
     }
@@ -210,3 +245,3 @@ getOptions(chartOptions, alias) {
     }
-    makeRenderOptions(options) {
+    makeRenderOptions(options, maxDataLabelWidth = 0, maxDataLabelHeight = 0) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
@@ -220,3 +255,3 @@ const seriesOptions = options.series;
         const { width, height } = this.rect;
-        const defaultRadius = getDefaultRadius(this.rect, isSemiCircular);
+        const defaultRadius = getDefaultRadius(this.rect, isSemiCircular, maxDataLabelWidth, maxDataLabelHeight);
         const innerRadius = calculateSizeWithPercentString(defaultRadius, (_l = (_k = (_j = seriesOptions) === null || _j === void 0 ? void 0 : _j.radiusRange) === null || _k === void 0 ? void 0 : _k.inner, (_l !== null && _l !== void 0 ? _l : 0)));
@@ -223,0 +258,0 @@ const outerRadius = calculateSizeWithPercentString(defaultRadius, (_p = (_o = (_m = seriesOptions) === null || _m === void 0 ? void 0 : _m.radiusRange) === null || _o === void 0 ? void 0 : _o.outer, (_p !== null && _p !== void 0 ? _p : (this.alias ? 0 : defaultRadius))));

dist/esm/component/radarSeries.d.ts

@@ -55,3 +55,3 @@ import Component from "./component";
             lineWidth: number | undefined;
-            strokeStyle: string | undefined;
+            strokeStyle: string;
         }[];
@@ -58,0 +58,0 @@ detectionSize?: number | undefined;

dist/esm/component/radarSeries.js

@@ -133,3 +133,6 @@ import Component from "./component";
         const { radius, borderWidth, borderColor, color } = this.theme[type].dot;
-        return responders.map((responder) => (Object.assign(Object.assign({}, responder), { radius, color: (color !== null && color !== void 0 ? color : responder.color), style: [{ lineWidth: borderWidth, strokeStyle: borderColor }] })));
+        return responders.map((responder) => {
+            const modelColor = (color !== null && color !== void 0 ? color : responder.color);
+            return Object.assign(Object.assign({}, responder), { radius, color: modelColor, style: [{ lineWidth: borderWidth, strokeStyle: (borderColor !== null && borderColor !== void 0 ? borderColor : getRGBA(modelColor, 0.5)) }] });
+        });
     }
@@ -136,0 +139,0 @@ onClick({ responders }) {

dist/esm/component/scatterSeries.js

@@ -5,3 +5,3 @@ import Component from "./component";
 import { getValueRatio } from "../helpers/calculator";
-import { deepCopy, deepMergedCopy, isNull, isNumber, isString, pick } from "../helpers/utils";
+import { deepCopy, deepMergedCopy, isNumber, isString, pick } from "../helpers/utils";
 import { getActiveSeriesMap } from "../helpers/legend";
@@ -87,4 +87,3 @@ import { getValueAxisName } from "../helpers/axes";
             const color = getRGBA(seriesColor, active ? 1 : 0.3);
-            const nonNullData = data.filter((datum) => !isNull(datum));
-            nonNullData.forEach((datum, index) => {
+            data.forEach((datum, index) => {
                 const rawXValue = getCoordinateXValue(datum);
@@ -108,4 +107,3 @@ const xValue = isString(rawXValue) ? Number(new Date(rawXValue)) : Number(rawXValue);
             const tooltipData = [];
-            const nonNullData = data.filter((datum) => !isNull(datum));
-            nonNullData.forEach((datum) => {
+            data.forEach((datum) => {
                 const value = {
@@ -124,3 +122,3 @@ x: getCoordinateXValue(datum),
         }
-        const model = this.responders.find(({ index, seriesIndex }) => isNumber(index) &&
+        const model = this.models.series.find(({ index, seriesIndex }) => isNumber(index) &&
             isNumber(seriesIndex) &&
@@ -127,0 +125,0 @@ index === closestResponder[0].index &&

dist/esm/component/tooltip.d.ts

 import Component from "./component";
 import { ChartState, Options } from "../../types/store/store";
-import { TooltipInfo, TooltipModel, TooltipDataValue, TooltipModelName } from "../../types/components/tooltip";
-import { ValueFormatter, TooltipTemplateFunc } from "../../types/options";
+import { TooltipInfo, TooltipModel, TooltipDataValue, TooltipModelName, TooltipData } from "../../types/components/tooltip";
+import { TooltipTemplateFunc, TooltipFormatter } from "../../types/options";
 import { TooltipTheme } from "../../types/theme";
@@ -16,3 +16,3 @@ declare type TooltipInfoModels = {
     offsetY: number;
-    formatter?: ValueFormatter;
+    formatter?: TooltipFormatter;
     tooltipInfoModels: TooltipInfoModels;
@@ -38,5 +38,6 @@ onSeriesPointHovered: ({ models, name }: {
     removeTooltip(): void;
+    private setTooltipTransition;
     render({ layout, options, theme }: ChartState<Options>): void;
-    getFormattedValue(value: TooltipDataValue): string;
+    getFormattedValue(value: TooltipDataValue, tooltipDataInfo: TooltipData): string;
 }
 export {};

dist/esm/component/tooltip.js

 import Component from "./component";
 import { getValueString } from "../helpers/tooltip";
 import { getBodyTemplate, tooltipTemplates } from "../helpers/tooltipTemplate";
-import { isNumber } from "../helpers/utils";
+import { isBoolean, isNumber, isString } from "../helpers/utils";
+import { getTranslateString } from "../helpers/style";
+const DEFAULT_TOOLTIP_TRANSITION = 'transform 0.2s ease';
 export default class Tooltip extends Component {
@@ -57,4 +59,3 @@ constructor() {
         const { x, y } = this.getPositionInRect(model);
-        this.tooltipContainerEl.style.left = `${left + x}px`;
-        this.tooltipContainerEl.style.top = `${top + y}px`;
+        this.tooltipContainerEl.style.transform = getTranslateString(left + x, top + y);
     }
@@ -79,4 +80,4 @@ getTooltipInfoModels() {
             acc.data.push(Object.assign(Object.assign({}, data), { value: Array.isArray(data.value)
-                    ? data.value.map((titleValue) => (Object.assign(Object.assign({}, titleValue), { formattedValue: this.getFormattedValue(titleValue.value) })))
-                    : data.value, formattedValue: this.getFormattedValue(data.value) }));
+                    ? data.value.map((titleValue) => (Object.assign(Object.assign({}, titleValue), { formattedValue: this.getFormattedValue(titleValue.value, data) })))
+                    : data.value, formattedValue: this.getFormattedValue(data.value, data) }));
             if (!acc.category && data.category) {
@@ -102,2 +103,4 @@ acc.category = data.category;
         this.tooltipContainerEl.classList.add('tooltip-container');
+        const { width, height, top, left } = this.chartEl.getBoundingClientRect();
+        this.tooltipContainerEl.style.transform = getTranslateString(left + width / 2, top + height / 2);
         this.chartEl.appendChild(this.tooltipContainerEl);
@@ -109,4 +112,15 @@ this.eventBus.on('seriesPointHovered', this.onSeriesPointHovered);
     }
+    setTooltipTransition(options) {
+        var _a;
+        const transition = (_a = options.tooltip) === null || _a === void 0 ? void 0 : _a.transition;
+        if (isBoolean(transition) && transition) {
+            this.tooltipContainerEl.style.transition = DEFAULT_TOOLTIP_TRANSITION;
+        }
+        else if (isString(transition)) {
+            this.tooltipContainerEl.style.transition = transition;
+        }
+    }
     render({ layout, options, theme }) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        this.setTooltipTransition(options);
         this.rect = layout.plot;
@@ -119,5 +133,7 @@ this.theme = theme.tooltip;
     }
-    getFormattedValue(value) {
-        return this.formatter ? this.formatter(value) : getValueString(value);
+    getFormattedValue(value, tooltipDataInfo) {
+        return this.formatter
+            ? this.formatter(value, tooltipDataInfo)
+            : getValueString(value);
     }
 }

dist/esm/component/zoom.js

@@ -50,3 +50,9 @@ import Component from "./component";
             this.eventBus.emit('zoom', makeObservableObjectToNormal(dragRange));
-            this.eventBus.emit('renderHoveredSeries', { models: [], name: this.name });
+            this.eventBus.emit('resetHoveredSeries');
+            this.eventBus.emit('hideTooltip');
+            // @TODO: Should occur after the series' click event
+            // Additional logic to control the sequence of events with each other is required.
+            setTimeout(() => {
+                this.eventBus.emit('resetSelectedSeries');
+            });
         }
@@ -53,0 +59,0 @@ this.resetSelectionArea();

dist/esm/helpers/axes.d.ts

 import { Options, Series, ChartOptionsUsingYAxis, Axes, ViewAxisLabel, RotationLabelData } from "../../types/store/store";
 import { AxisTitle, DateOption } from "../../types/options";
 import { Theme } from "../../types/theme";
-export declare function getAutoAdjustingInterval(count: number, axisWidth: number): number;
+export declare function getAutoAdjustingInterval(count: number, axisWidth: number, categories?: string[]): number;
 export declare function isLabelAxisOnYAxis(series: Series, options: Options): boolean;
@@ -47,6 +47,7 @@ export declare function hasBoxTypeSeries(series: Series): boolean;
 export declare function makeRotationData(maxLabelWidth: number, maxLabelHeight: number, distance: number, rotatable: boolean): Required<RotationLabelData>;
-export declare function getMaxLabelSize(labels: string[], font?: string): {
+export declare function getMaxLabelSize(labels: string[], xMargin: number, font?: string): {
     maxLabelWidth: number;
     maxLabelHeight: number;
 };
+export declare function getLabelXMargin(axisName: string, options: Options): number;
 export {};

dist/esm/helpers/axes.js

@@ -31,3 +31,4 @@ import { AxisType } from "../component/axis";
 }
-export function getAutoAdjustingInterval(count, axisWidth) {
+export function getAutoAdjustingInterval(count, axisWidth, categories) {
+    var _a;
     const autoInterval = {
@@ -38,2 +39,9 @@ MIN_WIDTH: 90,
     };
+    const LABEL_MARGIN = 5;
+    if ((_a = categories) === null || _a === void 0 ? void 0 : _a[0]) {
+        const categoryMinWidth = getTextWidth(categories[0]);
+        if (categoryMinWidth < axisWidth / count - LABEL_MARGIN) {
+            return 1;
+        }
+    }
     let candidates = [];
@@ -207,8 +215,16 @@ divisors(count).forEach((interval) => {
 }
-export function getMaxLabelSize(labels, font = DEFAULT_LABEL_TEXT) {
+export function getMaxLabelSize(labels, xMargin, font = DEFAULT_LABEL_TEXT) {
     const maxLengthLabel = labels.reduce((acc, cur) => (acc.length > cur.length ? acc : cur), '');
     return {
-        maxLabelWidth: getTextWidth(maxLengthLabel, font),
+        maxLabelWidth: getTextWidth(maxLengthLabel, font) + xMargin,
         maxLabelHeight: getTextHeight(maxLengthLabel, font),
     };
 }
+export function getLabelXMargin(axisName, options) {
+    var _a, _b, _c, _d;
+    if (axisName === 'xAxis') {
+        return 0;
+    }
+    const axisOptions = getYAxisOption(options);
+    return Math.abs((_d = (_c = (_b = (_a = axisOptions) === null || _a === void 0 ? void 0 : _a[axisName]) === null || _b === void 0 ? void 0 : _b.label) === null || _c === void 0 ? void 0 : _c.margin, (_d !== null && _d !== void 0 ? _d : 0)));
+}

dist/esm/helpers/dataLabels.d.ts

 import { OptionsWithDataLabels } from "../../types/store/store";
 import { DataLabelOptions, Rect } from "../../types/options";
 import { DataLabel, DataLabelOption, PointDataLabel, RectDataLabel, RadialDataLabel, LineDataLabel, DataLabelType } from "../../types/components/dataLabels";
+export declare const RADIUS_PADDING = 30;
 declare type LabelPosition = {
@@ -5,0 +6,0 @@ x: number;

dist/esm/helpers/dataLabels.js

@@ -5,3 +5,3 @@ import { isFunction, includes, isBoolean, isString } from "./utils";
 import { getFont } from "./style";
-const RADIUS_PADDING = 30;
+export const RADIUS_PADDING = 30;
 const CALLOUT_LENGTH = 20;
@@ -8,0 +8,0 @@ function getDefaultAnchor(type, withStack = false) {

dist/esm/helpers/pieSeries.d.ts

@@ -9,3 +9,3 @@ import { Rect, PieSeriesType } from "../../types/options";
 export declare function isSemiCircle(clockwise: boolean, startAngle: number, endAngle: number): boolean;
-export declare function getDefaultRadius({ width, height }: Rect, isSemiCircular?: boolean): number;
+export declare function getDefaultRadius({ width, height }: Rect, isSemiCircular?: boolean, maxDataLabelWidth?: number, maxDataLabelHeight?: number): number;
 export declare function getSemiCircleCenterY(rectHeight: number, clockwise: boolean): number;
@@ -12,0 +12,0 @@ export declare function makePieTooltipData(seriesRawData: PieSeriesType[], category?: string): TooltipData[];

dist/esm/helpers/pieSeries.js

 import { getPercentageValue, isString, isNull } from "./utils";
-const DEFAULT_RADIUS_RATIO = 0.9;
 const semiCircleCenterYRatio = {
@@ -7,2 +6,3 @@ COUNTER_CLOCKWISE: 0.1,
 };
+const MINIMUM_RADIUS = 10;
 export function hasClockwiseSemiCircle(clockwise, startAngle, endAngle) {
@@ -28,5 +28,14 @@ return (clockwise && ((startAngle >= -90 && endAngle <= 90) || (startAngle >= 90 && endAngle <= 180)));
 }
-export function getDefaultRadius({ width, height }, isSemiCircular = false) {
-    return ((isSemiCircular ? Math.min(width / 2, height) : Math.min(width, height) / 2) *
-        DEFAULT_RADIUS_RATIO);
+export function getDefaultRadius({ width, height }, isSemiCircular = false, maxDataLabelWidth = 0, maxDataLabelHeight = 0) {
+    let result;
+    if (isSemiCircular) {
+        result = Math.min(width / 2, height) - maxDataLabelHeight;
+    }
+    else if (width > height) {
+        result = height / 2 - maxDataLabelHeight;
+    }
+    else {
+        result = width / 2 - maxDataLabelWidth;
+    }
+    return Math.max(result, MINIMUM_RADIUS);
 }
@@ -33,0 +42,0 @@ export function getSemiCircleCenterY(rectHeight, clockwise) {

dist/esm/helpers/responders.js

@@ -81,4 +81,13 @@ import { getDistance } from "./calculator";
 export function makeTooltipCircleMap(seriesCircleModel, tooltipDataArr) {
+    const dataMap = tooltipDataArr.reduce((acc, cur) => {
+        const { index, seriesIndex } = cur;
+        if (!acc[seriesIndex]) {
+            acc[seriesIndex] = [];
+        }
+        acc[seriesIndex][index] = cur;
+        return acc;
+    }, []);
     return seriesCircleModel.reduce((acc, model) => {
-        const data = tooltipDataArr.find(({ index, seriesIndex }) => index === model.index && seriesIndex === model.seriesIndex);
+        const { seriesIndex, index } = model;
+        const data = dataMap[seriesIndex][index];
         const { category } = data;
@@ -85,0 +94,0 @@ if (!category) {

dist/esm/helpers/style.d.ts

 import { StyleProp } from "../../types/components/series";
 import { FontTheme, BubbleDataLabel, BoxDataLabel } from "../../types/theme";
 export declare function makeStyleObj<T, K>(style: StyleProp<T, K>, styleSet: Record<string, object>): T;
+export declare function getTranslateString(x: number, y: number): string;
 export declare function getTitleFontString(fontTheme: FontTheme): string;
@@ -5,0 +6,0 @@ export declare function getFontStyleString(theme: FontTheme): string;

dist/esm/helpers/style.js

@@ -11,2 +11,5 @@ import { isString, pick } from "./utils";
 }
+export function getTranslateString(x, y) {
+    return `translate(${x}px,${y}px)`;
+}
 export function getTitleFontString(fontTheme) {
@@ -13,0 +16,0 @@ const { fontFamily, fontSize, fontWeight } = fontTheme;

dist/esm/helpers/theme.d.ts

@@ -5,3 +5,2 @@ import { RawSeries } from "../../types/store/store";
 export declare const DEFAULT_LINE_SERIES_DOT_RADIUS = 3;
-export declare const DEFAULT_LINE_SERIES_HOVER_DOT_RADIUS: number;
 export declare const radarDefault: {
@@ -36,3 +35,2 @@ LINE_WIDTH: number;
             borderWidth: number;
-            borderColor: string;
         };
@@ -48,3 +46,2 @@ areaOpacity: number;
             borderWidth: number;
-            borderColor: string;
         };
@@ -57,3 +54,3 @@ };
 };
-export declare const axisTitleTheme: {
+export declare function makeAxisTitleTheme(globalFontFamily?: string): {
     fontSize: number;
@@ -64,113 +61,3 @@ fontFamily: string;
 };
-export declare const defaultTheme: {
-    chart: {
-        fontFamily: string;
-    };
-    title: {
-        fontSize: number;
-        fontFamily: string;
-        fontWeight: number;
-        color: string;
-    };
-    yAxis: {
-        title: {
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: number;
-            color: string;
-        };
-        label: {
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            color: string;
-        };
-        width: number;
-        color: string;
-    };
-    xAxis: {
-        title: {
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: number;
-            color: string;
-        };
-        label: {
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            color: string;
-        };
-        width: number;
-        color: string;
-    };
-    legend: {
-        label: {
-            color: string;
-            fontSize: number;
-            fontWeight: string;
-            fontFamily: string;
-        };
-    };
-    tooltip: {
-        background: string;
-        borderColor: string;
-        borderWidth: number;
-        borderRadius: number;
-        borderStyle: string;
-        body: {
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            color: string;
-        };
-        header: {
-            fontSize: number;
-            fontFamily: string;
-            fontWeight: string;
-            color: string;
-        };
-    };
-    plot: {
-        lineColor: string;
-        backgroundColor: string;
-    };
-    exportMenu: {
-        button: {
-            backgroundColor: string;
-            xIcon: {
-                color: string;
-                lineWidth: number;
-            };
-            dotIcon: {
-                color: string;
-                width: number;
-                height: number;
-                gap: number;
-            };
-            borderWidth: number;
-            borderRadius: any;
-            borderColor: any;
-        };
-        panel: {
-            header: {
-                backgroundColor: string;
-                fontSize: number;
-                fontFamily: string;
-                fontWeight: string;
-                color: string;
-            };
-            body: {
-                backgroundColor: string;
-                fontSize: number;
-                fontFamily: string;
-                fontWeight: string;
-                color: string;
-            };
-            borderWidth: number;
-            borderRadius: any;
-            borderColor: any;
-        };
-    };
-};
-export declare function getDefaultTheme(series: RawSeries, pieSeriesOuterAnchors: CheckAnchorPieSeries | Record<string, CheckAnchorPieSeries>, isNestedPieChart?: boolean): Theme;
+export declare function makeDefaultTheme(globalFontFamily?: string): Theme;
+export declare function getDefaultTheme(globalFontFamily: string | undefined, series: RawSeries, pieSeriesOuterAnchors: CheckAnchorPieSeries | Record<string, CheckAnchorPieSeries>, isNestedPieChart?: boolean): Theme;

dist/esm/helpers/theme.js

 import { getNestedPieChartAliasNames } from "./pieSeries";
 export const DEFAULT_LINE_SERIES_WIDTH = 2;
 export const DEFAULT_LINE_SERIES_DOT_RADIUS = 3;
-export const DEFAULT_LINE_SERIES_HOVER_DOT_RADIUS = DEFAULT_LINE_SERIES_DOT_RADIUS + 2;
 const DEFAULT_AREA_OPACITY = 0.3;
@@ -35,10 +34,12 @@ const DEFAULT_AREA_SELECTED_SERIES_OPACITY = DEFAULT_AREA_OPACITY;
 export const DEFAULT_BULLET_RANGE_OPACITY = [0.5, 0.3, 0.1];
-const DEFAULT_PIE_LINE_WIDTH = 5;
-const DEFAULT_DATA_LABEL = {
-    fontFamily: 'Arial',
-    fontSize: 11,
-    fontWeight: 400,
-    color: '#333333',
-    useSeriesColor: false,
-};
+const DEFAULT_PIE_LINE_WIDTH = 3;
+function makeDefaultDataLabelsTheme(globalFontFamily = 'Arial') {
+    return {
+        fontFamily: globalFontFamily,
+        fontSize: 11,
+        fontWeight: 400,
+        color: '#333333',
+        useSeriesColor: false,
+    };
+}
 const DEFAULT_BUBBLE_ARROW = {
@@ -85,5 +86,4 @@ width: 8,
         dot: {
-            radius: DEFAULT_LINE_SERIES_HOVER_DOT_RADIUS,
-            borderWidth: 2,
-            borderColor: '#fff',
+            radius: DEFAULT_LINE_SERIES_DOT_RADIUS,
+            borderWidth: DEFAULT_LINE_SERIES_DOT_RADIUS + 2,
         },
@@ -97,5 +97,4 @@ areaOpacity: DEFAULT_AREA_SELECTED_SERIES_OPACITY,
         dot: {
-            radius: DEFAULT_LINE_SERIES_HOVER_DOT_RADIUS,
-            borderWidth: 2,
-            borderColor: '#fff',
+            radius: DEFAULT_LINE_SERIES_DOT_RADIUS,
+            borderWidth: DEFAULT_LINE_SERIES_DOT_RADIUS + 2,
         },
@@ -108,80 +107,84 @@ },
 };
-export const axisTitleTheme = {
-    fontSize: 11,
-    fontFamily: 'Arial',
-    fontWeight: 700,
-    color: '#bbbbbb',
-};
-const commonTextTheme = {
-    fontSize: 11,
-    fontFamily: 'Arial',
-    fontWeight: 'normal',
-    color: '#333333',
-};
-export const defaultTheme = {
-    chart: {
-        fontFamily: 'Arial',
-    },
-    title: {
-        fontSize: 18,
-        fontFamily: 'Arial',
-        fontWeight: 100,
-        color: '#333333',
-    },
-    yAxis: {
-        title: Object.assign({}, axisTitleTheme),
-        label: Object.assign({}, commonTextTheme),
-        width: 1,
-        color: '#333333',
-    },
-    xAxis: {
-        title: Object.assign({}, axisTitleTheme),
-        label: Object.assign({}, commonTextTheme),
-        width: 1,
-        color: '#333333',
-    },
-    legend: {
-        label: {
+export function makeAxisTitleTheme(globalFontFamily = 'Arial') {
+    return {
+        fontSize: 11,
+        fontFamily: globalFontFamily,
+        fontWeight: 700,
+        color: '#bbbbbb',
+    };
+}
+function makeCommonTextTheme(globalFontFamily = 'Arial') {
+    return { fontSize: 11, fontFamily: globalFontFamily, fontWeight: 'normal', color: '#333333' };
+}
+export function makeDefaultTheme(globalFontFamily = 'Arial') {
+    const axisTitleTheme = makeAxisTitleTheme(globalFontFamily);
+    const commonTextTheme = makeCommonTextTheme(globalFontFamily);
+    return {
+        chart: {
+            fontFamily: globalFontFamily,
+            backgroundColor: '#ffffff',
+        },
+        title: {
+            fontSize: 18,
+            fontFamily: globalFontFamily,
+            fontWeight: 100,
             color: '#333333',
-            fontSize: 11,
-            fontWeight: 'normal',
-            fontFamily: 'Arial',
         },
-    },
-    tooltip: {
-        background: 'rgba(85, 85, 85, 0.95)',
-        borderColor: 'rgba(255, 255, 255, 0)',
-        borderWidth: 0,
-        borderRadius: 3,
-        borderStyle: 'solid',
-        body: {
-            fontSize: 12,
-            fontFamily: 'Arial, sans-serif',
-            fontWeight: 'normal',
-            color: '#ffffff',
+        yAxis: {
+            title: Object.assign({}, axisTitleTheme),
+            label: Object.assign({}, commonTextTheme),
+            width: 1,
+            color: '#333333',
         },
-        header: {
-            fontSize: 13,
-            fontFamily: 'Arial, sans-serif',
-            fontWeight: 'bold',
-            color: '#ffffff',
+        xAxis: {
+            title: Object.assign({}, axisTitleTheme),
+            label: Object.assign({}, commonTextTheme),
+            width: 1,
+            color: '#333333',
         },
-    },
-    plot: {
-        lineColor: 'rgba(0, 0, 0, 0.05)',
-        backgroundColor: '#ffffff',
-    },
-    exportMenu: {
-        button: Object.assign(Object.assign({}, makeBorderTheme(5, '#f4f4f4')), { backgroundColor: '#f4f4f4', xIcon: {
-                color: '#555555',
-                lineWidth: 2,
-            }, dotIcon: {
-                color: '#555555',
-                width: 2,
-                height: 2,
-                gap: 2,
-            } }),
-        panel: Object.assign(Object.assign({}, makeBorderTheme(0, '#bab9ba')), { header: Object.assign(Object.assign({}, commonTextTheme), { backgroundColor: '#f4f4f4' }), body: Object.assign(Object.assign({}, commonTextTheme), { backgroundColor: '#ffffff' }) }),
-    },
-};
+        legend: {
+            label: {
+                color: '#333333',
+                fontSize: 11,
+                fontWeight: 'normal',
+                fontFamily: globalFontFamily,
+            },
+        },
+        tooltip: {
+            background: 'rgba(85, 85, 85, 0.95)',
+            borderColor: 'rgba(255, 255, 255, 0)',
+            borderWidth: 0,
+            borderRadius: 3,
+            borderStyle: 'solid',
+            body: {
+                fontSize: 12,
+                fontFamily: `${globalFontFamily}, sans-serif`,
+                fontWeight: 'normal',
+                color: '#ffffff',
+            },
+            header: {
+                fontSize: 13,
+                fontFamily: `${globalFontFamily}, sans-serif`,
+                fontWeight: 'bold',
+                color: '#ffffff',
+            },
+        },
+        plot: {
+            lineColor: 'rgba(0, 0, 0, 0.05)',
+            backgroundColor: 'rgba(255, 255, 255, 0)',
+        },
+        exportMenu: {
+            button: Object.assign(Object.assign({}, makeBorderTheme(5, '#f4f4f4')), { backgroundColor: '#f4f4f4', xIcon: {
+                    color: '#555555',
+                    lineWidth: 2,
+                }, dotIcon: {
+                    color: '#555555',
+                    width: 2,
+                    height: 2,
+                    gap: 2,
+                } }),
+            panel: Object.assign(Object.assign({}, makeBorderTheme(0, '#bab9ba')), { header: Object.assign(Object.assign({}, commonTextTheme), { backgroundColor: '#f4f4f4' }), body: Object.assign(Object.assign({}, commonTextTheme), { backgroundColor: '#ffffff' }) }),
+        },
+    };
+}
 function makeBorderTheme(borderRadius, borderColor, borderWidth = 1) {
@@ -203,3 +206,4 @@ return { borderWidth, borderRadius, borderColor };
 // eslint-disable-next-line complexity
-function getSeriesTheme(seriesName, { hasOuterAnchor = false, hasOuterAnchorPieSeriesName = false }, isNestedPieChart = false) {
+function getSeriesTheme(globalFontFamily, seriesName, { hasOuterAnchor = false, hasOuterAnchorPieSeriesName = false }, isNestedPieChart = false) {
+    const defaultDataLabelTheme = makeDefaultDataLabelsTheme(globalFontFamily);
     const lineTypeSeriesTheme = {
@@ -211,3 +215,3 @@ lineWidth: defaultSeriesTheme.lineWidth,
         dot: defaultSeriesTheme.dot,
-        dataLabels: Object.assign(Object.assign({}, DEFAULT_DATA_LABEL), { textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme()), { arrow: Object.assign({ visible: false, direction: 'bottom' }, DEFAULT_BUBBLE_ARROW) }) }),
+        dataLabels: Object.assign(Object.assign({}, defaultDataLabelTheme), { textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme()), { arrow: Object.assign({ visible: false, direction: 'bottom' }, DEFAULT_BUBBLE_ARROW) }) }),
     };
@@ -235,3 +239,3 @@ const transparentColor = 'rgba(255, 255, 255, 0)';
                 },
-                dataLabels: Object.assign(Object.assign({}, DEFAULT_DATA_LABEL), { color: '#ffffff', textBubble: Object.assign({}, makeDefaultTextBubbleTheme(false, 1, 5, 1, 'rgba(255, 255, 255, 0.5)')) }),
+                dataLabels: Object.assign(Object.assign({}, defaultDataLabelTheme), { color: '#ffffff', textBubble: Object.assign({}, makeDefaultTextBubbleTheme(false, 1, 5, 1, 'rgba(255, 255, 255, 0.5)')) }),
             };
@@ -245,5 +249,9 @@ case 'scatter':
                     fillColor: 'rgba(255, 255, 255, 1)',
+                    borderWidth: 2.5,
+                    size: 12,
                 },
                 hover: {
                     fillColor: 'rgba(255, 255, 255, 1)',
+                    borderWidth: 2.5,
+                    size: 12,
                 },
@@ -256,3 +264,8 @@ };
                 select: {},
-                hover: {},
+                hover: {
+                    shadowColor: 'rgba(0, 0, 0, 0.3)',
+                    shadowBlur: 2,
+                    shadowOffsetY: 2,
+                    lineWidth: 2,
+                },
             };
@@ -265,4 +278,3 @@ case 'radar':
                         radius: radarDefault.HOVER_DOT_RADIUS,
-                        borderColor: '#ffffff',
-                        borderWidth: 2,
+                        borderWidth: radarDefault.HOVER_DOT_RADIUS + 1,
                     },
@@ -273,4 +285,3 @@ },
                         radius: radarDefault.HOVER_DOT_RADIUS,
-                        borderColor: '#ffffff',
-                        borderWidth: 2,
+                        borderWidth: radarDefault.HOVER_DOT_RADIUS + 1,
                     },
@@ -306,3 +317,3 @@ restSeries: {
                 },
-                dataLabels: Object.assign(Object.assign({}, DEFAULT_DATA_LABEL), { textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme(false, 1, 4, 3)), { arrow: Object.assign({ visible: false }, DEFAULT_BUBBLE_ARROW) }), stackTotal: Object.assign(Object.assign({}, DEFAULT_DATA_LABEL), { textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme(true, 1, 4, 3)), { arrow: Object.assign({ visible: true }, DEFAULT_BUBBLE_ARROW) }) }) }),
+                dataLabels: Object.assign(Object.assign({}, defaultDataLabelTheme), { textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme(false, 1, 4, 3)), { arrow: Object.assign({ visible: false }, DEFAULT_BUBBLE_ARROW) }), stackTotal: Object.assign(Object.assign({}, defaultDataLabelTheme), { textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme(true, 1, 4, 3)), { arrow: Object.assign({ visible: true }, DEFAULT_BUBBLE_ARROW) }) }) }),
             };
@@ -330,3 +341,3 @@ case 'bullet':
                     }, areaOpacity: 1 }),
-                dataLabels: Object.assign(Object.assign({}, DEFAULT_DATA_LABEL), { textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme()), { arrow: Object.assign({ visible: false }, DEFAULT_BUBBLE_ARROW) }), marker: Object.assign(Object.assign({}, DEFAULT_DATA_LABEL), { fontSize: 9, useSeriesColor: true, textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme(true)), { backgroundColor: 'rgba(255, 255, 255, 0.8)', shadowColor: 'rgba(0, 0, 0, 0.0)', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 0, arrow: Object.assign({ visible: false }, DEFAULT_BUBBLE_ARROW) }) }) }),
+                dataLabels: Object.assign(Object.assign({}, defaultDataLabelTheme), { textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme()), { arrow: Object.assign({ visible: false }, DEFAULT_BUBBLE_ARROW) }), marker: Object.assign(Object.assign({}, defaultDataLabelTheme), { fontSize: 9, useSeriesColor: true, textBubble: Object.assign(Object.assign({}, makeDefaultTextBubbleTheme(true)), { backgroundColor: 'rgba(255, 255, 255, 0.8)', shadowColor: 'rgba(0, 0, 0, 0.0)', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 0, arrow: Object.assign({ visible: false }, DEFAULT_BUBBLE_ARROW) }) }) }),
             };
@@ -399,3 +410,3 @@ case 'boxPlot':
                     },
-                    pieSeriesName: Object.assign(Object.assign({}, DEFAULT_DATA_LABEL), { useSeriesColor: hasOuterAnchorPieSeriesName, color: hasOuterAnchorPieSeriesName ? '#333333' : '#ffffff', textBubble: Object.assign({}, makeDefaultTextBubbleTheme(false, 0)) }),
+                    pieSeriesName: Object.assign(Object.assign({}, defaultDataLabelTheme), { useSeriesColor: hasOuterAnchorPieSeriesName, color: hasOuterAnchorPieSeriesName ? '#333333' : '#ffffff', textBubble: Object.assign({}, makeDefaultTextBubbleTheme(false, 0)) }),
                 },
@@ -407,9 +418,9 @@ };
 }
-export function getDefaultTheme(series, pieSeriesOuterAnchors, isNestedPieChart = false) {
-    const result = Object.keys(series).reduce((acc, seriesName) => (Object.assign(Object.assign({}, acc), { series: Object.assign(Object.assign({}, acc.series), { [seriesName]: getSeriesTheme(seriesName, pieSeriesOuterAnchors) }) })), defaultTheme);
+export function getDefaultTheme(globalFontFamily, series, pieSeriesOuterAnchors, isNestedPieChart = false) {
+    const result = Object.keys(series).reduce((acc, seriesName) => (Object.assign(Object.assign({}, acc), { series: Object.assign(Object.assign({}, acc.series), { [seriesName]: getSeriesTheme(globalFontFamily, seriesName, pieSeriesOuterAnchors) }) })), makeDefaultTheme(globalFontFamily));
     if (isNestedPieChart) {
         const aliasNames = getNestedPieChartAliasNames(series);
-        result.series.pie = aliasNames.reduce((acc, cur) => (Object.assign(Object.assign({}, acc), { [cur]: getSeriesTheme('pie', pieSeriesOuterAnchors[cur], isNestedPieChart) })), {});
+        result.series.pie = aliasNames.reduce((acc, cur) => (Object.assign(Object.assign({}, acc), { [cur]: getSeriesTheme(globalFontFamily, 'pie', pieSeriesOuterAnchors[cur], isNestedPieChart) })), {});
     }
     return result;
 }

dist/esm/store/axes.d.ts

@@ -1,4 +0,25 @@
-import { StoreModule, ChartOptionsUsingYAxis } from "../../types/store/store";
+import { CenterYAxisData, Options, ScaleData, Series, StoreModule, ChartOptionsUsingYAxis, LabelAxisData, InitAxisData } from "../../types/store/store";
+import { RangeDataType } from "../../types/options";
+import { AxisTheme } from "../../types/theme";
+interface StateProp {
+    scale: ScaleData;
+    axisSize: number;
+    options: Options;
+    series: Series;
+    theme: Required<AxisTheme>;
+    centerYAxis?: Pick<CenterYAxisData, 'xAxisHalfSize'> | null;
+    zoomRange?: RangeDataType<number>;
+    initialAxisData: InitAxisData;
+    labelOnYAxis?: boolean;
+    axisName: string;
+}
+declare type ValueStateProp = StateProp & {
+    categories: string[];
+    rawCategories: string[];
+    isCoordinateTypeChart: boolean;
+};
+declare type LabelAxisState = Omit<LabelAxisData, 'tickInterval' | 'labelInterval'>;
 export declare function isCenterYAxis(options: ChartOptionsUsingYAxis, isBar: boolean): boolean;
+export declare function getLabelAxisData(stateProp: ValueStateProp): LabelAxisState;
 declare const axes: StoreModule;
 export default axes;

dist/esm/store/axes.js

@@ -1,2 +0,2 @@
-import { getAxisName, getSizeKey, hasBoxTypeSeries, isLabelAxisOnYAxis, isPointOnColumn, getYAxisOption, getAutoAdjustingInterval, getAxisTheme, getViewAxisLabels, hasAxesLayoutChanged, getRotatableOption, makeFormattedCategory, getMaxLabelSize, makeTitleOption, makeRotationData, } from "../helpers/axes";
+import { getAxisName, getSizeKey, hasBoxTypeSeries, isLabelAxisOnYAxis, isPointOnColumn, getYAxisOption, getAutoAdjustingInterval, getAxisTheme, getViewAxisLabels, hasAxesLayoutChanged, getRotatableOption, makeFormattedCategory, getMaxLabelSize, makeTitleOption, makeRotationData, getLabelXMargin, } from "../helpers/axes";
 import { makeLabelsFromLimit, getAxisLabelAnchorPoint } from "../helpers/calculator";
@@ -27,4 +27,9 @@ import { deepMergedCopy, hasNegativeOnly, isNumber, pickProperty } from "../helpers/utils";
 }
-function getLabelAxisData(stateProp) {
-    var _a, _b, _c, _d;
+function getAxisFormatter(options, axisName) {
+    var _a, _b, _c;
+    const axisOptions = Object.assign(Object.assign({}, getYAxisOption(options)), { xAxis: options.xAxis });
+    return _c = (_b = (_a = axisOptions[axisName]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.formatter, (_c !== null && _c !== void 0 ? _c : ((value) => value));
+}
+export function getLabelAxisData(stateProp) {
+    var _a, _b;
     const { axisSize, categories, series, options, theme, scale, zoomRange, rawCategories, initialAxisData, isCoordinateTypeChart, axisName, } = stateProp;
@@ -35,5 +40,5 @@ const pointOnColumn = isPointOnColumn(series, options);
         : makeFormattedCategory(categories, (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.xAxis) === null || _b === void 0 ? void 0 : _b.date);
-    const formatter = (_d = (_c = options[axisName]) === null || _c === void 0 ? void 0 : _c.formatter, (_d !== null && _d !== void 0 ? _d : ((value) => value)));
+    const formatter = getAxisFormatter(options, axisName);
     // @TODO: regenerate label when exceeding max width
-    const labels = labelsBeforeFormatting.map((label) => formatter(label));
+    const labels = labelsBeforeFormatting.map((label, index) => formatter(label, { index, labels: labelsBeforeFormatting, axisName }));
     const tickIntervalCount = categories.length - (pointOnColumn ? 0 : 1);
@@ -47,2 +52,3 @@ const tickDistance = tickIntervalCount ? axisSize / tickIntervalCount : axisSize;
         tickCount }, initialAxisData), axisSize);
+    const axisLabelMargin = getLabelXMargin(axisName, options);
     return Object.assign(Object.assign({ labels,
@@ -53,6 +59,6 @@ viewLabels,
         tickDistance,
-        tickCount, isLabelAxis: true }, initialAxisData), getMaxLabelSize(labels, getTitleFontString(theme.label)));
+        tickCount, isLabelAxis: true }, initialAxisData), getMaxLabelSize(labels, axisLabelMargin, getTitleFontString(theme.label)));
 }
 function getValueAxisData(stateProp) {
-    var _a, _b, _c;
+    var _a;
     const { scale, axisSize, series, options, centerYAxis, initialAxisData, theme, labelOnYAxis, axisName, } = stateProp;
@@ -62,3 +68,3 @@ const { limit, stepSize } = scale;
     const divergingBoxSeries = isDivergingBoxSeries(series, options);
-    const formatter = (_c = (_b = options[axisName]) === null || _b === void 0 ? void 0 : _b.formatter, (_c !== null && _c !== void 0 ? _c : ((value) => value)));
+    const formatter = getAxisFormatter(options, axisName);
     const zeroPosition = getZeroPosition(limit, axisSize, isLabelAxisOnYAxis(series, options), divergingBoxSeries);
@@ -69,3 +75,3 @@ let valueLabels = makeLabelsFromLimit(limit, stepSize);
     }
-    const labels = valueLabels.map((label) => formatter(label));
+    const labels = valueLabels.map((label, index) => formatter(label, { index, labels: valueLabels, axisName }));
     const tickDistance = size / Math.max(valueLabels.length, 1);
@@ -77,6 +83,7 @@ const tickCount = valueLabels.length;
         tickCount }, initialAxisData), size);
+    const axisLabelMargin = getLabelXMargin(axisName, options);
     const axisData = Object.assign(Object.assign({ labels,
         viewLabels,
         pointOnColumn, isLabelAxis: false, tickCount,
-        tickDistance }, initialAxisData), getMaxLabelSize(valueLabels, getTitleFontString(theme.label)));
+        tickDistance }, initialAxisData), getMaxLabelSize(labels, axisLabelMargin, getTitleFontString(theme.label)));
     if (isNumber(zeroPosition)) {
@@ -93,11 +100,10 @@ axisData.zeroPosition = zeroPosition;
 function getRadialAxis(scale, plot, theme, { labelInterval }, options) {
-    var _a, _b, _c;
     const { limit, stepSize } = scale;
     const { width, height } = plot;
     const valueLabels = makeLabelsFromLimit(limit, stepSize);
-    const formatter = (_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.yAxis) === null || _b === void 0 ? void 0 : _b.formatter, (_c !== null && _c !== void 0 ? _c : ((value) => value)));
+    const formatter = getAxisFormatter(options, 'yAxis');
     const labels = valueLabels.map((label) => formatter(label));
     const axisSize = Math.min(width, height) / 2 - 50;
     return Object.assign({ labels,
-        axisSize, centerX: width / 2, centerY: height / 2, labelInterval }, getMaxLabelSize(valueLabels, getTitleFontString(theme.label)));
+        axisSize, centerX: width / 2, centerY: height / 2, labelInterval }, getMaxLabelSize(labels, 0, getTitleFontString(theme.label)));
 }
@@ -110,3 +116,3 @@ function getInitTickInterval(categories, layout) {
     const count = categories.length;
-    return getAutoAdjustingInterval(count, width);
+    return getAutoAdjustingInterval(count, width, categories);
 }
@@ -159,3 +165,3 @@ function getInitAxisIntervalData(isLabelAxis, params) {
 }
-function getSecondaryYAxisData({ state, labelOnYAxis, valueAxisSize, labelAxisSize, labelAxisName, valueAxisName, initialAxisData, isCoordinateTypeChart, }) {
+function getSecondaryYAxisData({ state, labelOnYAxis, valueAxisSize, labelAxisSize, initialAxisData, isCoordinateTypeChart, }) {
     var _a, _b;
@@ -167,3 +173,3 @@ const { scale, options, series, zoomRange, theme } = state;
         ? getLabelAxisData({
-            scale: scale[labelAxisName],
+            scale: scale.secondaryYAxis,
             axisSize: labelAxisSize,
@@ -178,3 +184,3 @@ categories: (_b = (_a = getYAxisOption(options).secondaryYAxis) === null || _a === void 0 ? void 0 : _a.categories, (_b !== null && _b !== void 0 ? _b : categories)),
             isCoordinateTypeChart,
-            axisName: labelAxisName,
+            axisName: AxisType.SECONDARY_Y,
         })
@@ -189,8 +195,8 @@ : getValueAxisData({
             initialAxisData,
-            axisName: valueAxisName,
+            axisName: AxisType.SECONDARY_Y,
         });
 }
-function makeXAxisData({ axisData, axisSize, centerYAxis, rotatable }) {
+function makeXAxisData({ axisData, axisSize, centerYAxis, rotatable, labelMargin = 0 }) {
     const { viewLabels, pointOnColumn, maxLabelWidth, maxLabelHeight } = axisData;
-    const offsetY = getAxisLabelAnchorPoint(maxLabelHeight);
+    const offsetY = getAxisLabelAnchorPoint(maxLabelHeight) + labelMargin;
     const size = centerYAxis ? centerYAxis.xAxisHalfSize : axisSize;
@@ -204,2 +210,16 @@ const distance = size / (viewLabels.length - (pointOnColumn ? 0 : 1));
 }
+function getAxisInfo(labelOnYAxis, plot) {
+    const { valueAxisName, labelAxisName } = getAxisName(labelOnYAxis);
+    const { valueSizeKey, labelSizeKey } = getSizeKey(labelOnYAxis);
+    const valueAxisSize = plot[valueSizeKey];
+    const labelAxisSize = plot[labelSizeKey];
+    return { valueAxisName, valueAxisSize, labelAxisName, labelAxisSize };
+}
+function getCategoriesWithTypes(categories, rawCategories) {
+    var _a, _b;
+    return {
+        categories: (_a = categories, (_a !== null && _a !== void 0 ? _a : [])),
+        rawCategories: (_b = rawCategories, (_b !== null && _b !== void 0 ? _b : [])),
+    };
+}
 const axes = {
@@ -232,11 +252,7 @@ name: 'axes',
             const labelOnYAxis = isLabelAxisOnYAxis(series, options);
-            const categories = (_a = state.categories, (_a !== null && _a !== void 0 ? _a : []));
-            const rawCategories = (_b = state.rawCategories, (_b !== null && _b !== void 0 ? _b : []));
-            const { valueAxisName, labelAxisName } = getAxisName(labelOnYAxis);
-            const { valueSizeKey, labelSizeKey } = getSizeKey(labelOnYAxis);
-            const valueAxisSize = plot[valueSizeKey];
-            const labelAxisSize = plot[labelSizeKey];
+            const { categories, rawCategories } = getCategoriesWithTypes(state.categories, state.rawCategories);
+            const { valueAxisName, valueAxisSize, labelAxisName, labelAxisSize } = getAxisInfo(labelOnYAxis, plot);
             const hasCenterYAxis = state.axes.centerYAxis;
             const isCoordinateTypeChart = isCoordinateSeries(series);
-            const initialAxisData = getInitialAxisData(options, labelOnYAxis, rawCategories, layout, isCoordinateTypeChart);
+            const initialAxisData = getInitialAxisData(options, labelOnYAxis, categories, layout, isCoordinateTypeChart);
             const valueAxisData = getValueAxisData({
@@ -297,7 +313,10 @@ scale: scale[valueAxisName],
             }
-            const rotatable = getRotatableOption(options);
             const axesState = {
-                xAxis: makeXAxisData(labelOnYAxis
-                    ? { axisData: valueAxisData, axisSize: valueAxisSize, centerYAxis, rotatable }
-                    : { axisData: labelAxisData, axisSize: labelAxisSize, centerYAxis, rotatable }),
+                xAxis: makeXAxisData({
+                    axisData: labelOnYAxis ? valueAxisData : labelAxisData,
+                    axisSize: labelOnYAxis ? valueAxisSize : labelAxisSize,
+                    centerYAxis,
+                    rotatable: getRotatableOption(options),
+                    labelMargin: (_b = (_a = options.xAxis) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.margin,
+                }),
                 yAxis: labelOnYAxis ? labelAxisData : valueAxisData,
@@ -304,0 +323,0 @@ secondaryYAxis,

dist/esm/store/category.js

 import { isNull, isNumber, sortCategories } from "../helpers/utils";
 import { getCoordinateXValue } from "../helpers/coordinate";
-import { isBulletSeries } from "../component/bulletSeries";
 import { getDataInRange } from "../helpers/range";
@@ -24,3 +23,3 @@ export function makeRawCategories(series, categories) {
             }
-            else if (isBulletSeries(key)) {
+            else if (key === 'bullet') {
                 firstValues.add(name);
@@ -27,0 +26,0 @@ }

dist/esm/store/dataRange.js

@@ -1,3 +0,2 @@
-import { getFirstValidValue, isNull } from "../helpers/utils";
-import { isBoxSeries } from "../component/boxSeries";
+import { getFirstValidValue, isNull, includes } from "../helpers/utils";
 import { extend } from "./store";
@@ -7,3 +6,2 @@ import { getAxisName, isLabelAxisOnYAxis, getValueAxisNames, getYAxisOption, hasSecondaryYAxis, } from "../helpers/axes";
 import { isRangeValue } from "../helpers/range";
-import { isBulletSeries } from "../component/bulletSeries";
 export function getLimitSafely(baseValues) {
@@ -112,3 +110,3 @@ const limit = {
                 }
-                else if (isBoxSeries(seriesName)) {
+                else if (includes(['bar', 'column', 'radar'], seriesName)) {
                     values.push(0);
@@ -122,3 +120,3 @@ }
                 }
-                else if (isBulletSeries(seriesName)) {
+                else if (seriesName === 'bullet') {
                     values = series[seriesName].data.flatMap(({ data, markers, ranges }) => [
@@ -125,0 +123,0 @@ data,

dist/esm/store/heatmapAxes.js

 import { AxisType } from "../component/axis";
-import { getAxisTheme, makeFormattedCategory, getViewAxisLabels, makeRotationData, getRotatableOption, hasAxesLayoutChanged, makeTitleOption, getMaxLabelSize, } from "../helpers/axes";
+import { getAxisTheme, makeFormattedCategory, getViewAxisLabels, makeRotationData, getRotatableOption, hasAxesLayoutChanged, makeTitleOption, getMaxLabelSize, getLabelXMargin, } from "../helpers/axes";
 import { getAxisLabelAnchorPoint } from "../helpers/calculator";
 import { getTitleFontString } from "../helpers/style";
 function getHeatmapAxisData(stateProp, axisType) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { categories, axisSize, options, theme } = stateProp;
     const isLabelAxis = axisType === AxisType.X;
     const axisName = isLabelAxis ? 'x' : 'y';
-    const labels = makeFormattedCategory(categories[axisName], (_a = options[axisType]) === null || _a === void 0 ? void 0 : _a.date);
+    const formatter = (_c = (_b = (_a = options[axisType]) === null || _a === void 0 ? void 0 : _a.label) === null || _b === void 0 ? void 0 : _b.formatter, (_c !== null && _c !== void 0 ? _c : ((value) => value)));
+    const labelsBeforeFormatting = makeFormattedCategory(categories[axisName], (_d = options[axisType]) === null || _d === void 0 ? void 0 : _d.date);
+    const labels = labelsBeforeFormatting.map((label, index) => formatter(label, { index, labels: labelsBeforeFormatting, axisName: axisType }));
     const tickIntervalCount = labels.length;
@@ -16,4 +18,4 @@ const tickDistance = tickIntervalCount ? axisSize / tickIntervalCount : axisSize;
     const tickCount = tickIntervalCount + 1;
-    const tickInterval = (_d = (_c = (_b = options[axisType]) === null || _b === void 0 ? void 0 : _b.tick) === null || _c === void 0 ? void 0 : _c.interval, (_d !== null && _d !== void 0 ? _d : 1));
-    const labelInterval = (_g = (_f = (_e = options[axisType]) === null || _e === void 0 ? void 0 : _e.label) === null || _f === void 0 ? void 0 : _f.interval, (_g !== null && _g !== void 0 ? _g : 1));
+    const tickInterval = (_g = (_f = (_e = options[axisType]) === null || _e === void 0 ? void 0 : _e.tick) === null || _f === void 0 ? void 0 : _f.interval, (_g !== null && _g !== void 0 ? _g : 1));
+    const labelInterval = (_k = (_j = (_h = options[axisType]) === null || _h === void 0 ? void 0 : _h.label) === null || _j === void 0 ? void 0 : _j.interval, (_k !== null && _k !== void 0 ? _k : 1));
     const viewLabels = getViewAxisLabels({
@@ -27,3 +29,4 @@ labels,
     }, axisSize);
-    const { maxLabelWidth, maxLabelHeight } = getMaxLabelSize(labels, getTitleFontString(theme.label));
+    const labelXMargin = getLabelXMargin(axisType, options);
+    const { maxLabelWidth, maxLabelHeight } = getMaxLabelSize(labels, labelXMargin, getTitleFontString(theme.label));
     const axisData = {
@@ -39,3 +42,3 @@ labels,
         labelInterval,
-        title: makeTitleOption((_h = options.xAxis) === null || _h === void 0 ? void 0 : _h.title),
+        title: makeTitleOption((_l = options.xAxis) === null || _l === void 0 ? void 0 : _l.title),
         maxLabelWidth,
@@ -45,3 +48,4 @@ maxLabelHeight,
     if (axisType === AxisType.X) {
-        const offsetY = getAxisLabelAnchorPoint(maxLabelHeight);
+        const labelMargin = (_p = (_o = (_m = options.xAxis) === null || _m === void 0 ? void 0 : _m.label) === null || _o === void 0 ? void 0 : _o.margin, (_p !== null && _p !== void 0 ? _p : 0));
+        const offsetY = getAxisLabelAnchorPoint(maxLabelHeight) + labelMargin;
         const distance = axisSize / viewLabels.length;
@@ -48,0 +52,0 @@ const rotationData = makeRotationData(maxLabelWidth, maxLabelHeight, distance, getRotatableOption(options));

dist/esm/store/layout.js

@@ -316,7 +316,7 @@ import { extend } from "./store";
 }
-function checkAxisSize({ width, height }, layout, legendState) {
+function adjustAxisSize({ width, height }, layout, legendState) {
     if (width < 0 || height < 0) {
         return;
     }
-    const { title, yAxisTitle, yAxis, xAxis, xAxisTitle, legend } = layout;
+    const { title, yAxisTitle, yAxis, xAxis, xAxisTitle, legend, secondaryYAxis } = layout;
     const { align } = legendState;
@@ -340,7 +340,5 @@ const hasVerticalLegend = isVerticalAlign(align);
     }
+    secondaryYAxis.x = xAxis.x + xAxis.width;
+    secondaryYAxis.height = yAxis.height;
 }
-function adjustSecondaryYAxisXPosition(xAxis, secondaryYAxis) {
-    const { x: xAxisX, width: xAxisWidth } = xAxis;
-    secondaryYAxis.x = xAxisX + xAxisWidth;
-}
 const layout = {
@@ -355,5 +353,6 @@ name: 'layout',
             const { legend: legendState, theme, circleLegend: circleLegendState, series, options, chart, axes, } = state;
+            const { width, height } = chart;
             const chartSize = {
-                height: chart.height - padding.Y * 2,
-                width: chart.width - padding.X * 2,
+                height: height - padding.Y * 2,
+                width: width - padding.X * 2,
             };
@@ -445,7 +444,7 @@ const hasCenterYAxis = isCenterYAxis(options, !!series.bar);
             });
-            checkAxisSize(chartSize, { title, yAxisTitle, yAxis, xAxis, xAxisTitle, legend }, legendState);
-            adjustSecondaryYAxisXPosition(xAxis, secondaryYAxis);
+            adjustAxisSize(chartSize, { title, yAxisTitle, yAxis, xAxis, xAxisTitle, legend, secondaryYAxis }, legendState);
             const circleLegend = getCircleLegendRect(xAxis, yAxis, legendState.align, circleLegendState.width);
             const plot = getPlotRect(xAxis, yAxis, optionSize.plot);
             extend(state.layout, {
+                chart: { x: 0, y: 0, width, height },
                 title,
@@ -452,0 +451,0 @@ plot,

dist/esm/store/legend.js

@@ -9,3 +9,3 @@ import { isUndefined, sum, includes, deepMergedCopy, isNumber } from "../helpers/utils";
 import { getTitleFontString } from "../helpers/style";
-import { defaultTheme } from "../helpers/theme";
+import { makeDefaultTheme } from "../helpers/theme";
 function calculateLegendWidth({ defaultWidth, legendWidths, useSpectrumLegend, options, align, visible, checkbox, }) {
@@ -124,7 +124,8 @@ var _a, _b;
 function getLegendState(options, series) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const checkboxVisible = showCheckbox(options);
     const useSpectrumLegend = (_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.useColorValue, (_c !== null && _c !== void 0 ? _c : !!series.heatmap));
     const useScatterChartIcon = !!((_d = series) === null || _d === void 0 ? void 0 : _d.scatter);
-    const font = getTitleFontString(deepMergedCopy(defaultTheme.legend.label, Object.assign({}, (_f = (_e = options.theme) === null || _e === void 0 ? void 0 : _e.legend) === null || _f === void 0 ? void 0 : _f.label)));
+    const defaultTheme = makeDefaultTheme((_g = (_f = (_e = options) === null || _e === void 0 ? void 0 : _e.theme) === null || _f === void 0 ? void 0 : _f.chart) === null || _g === void 0 ? void 0 : _g.fontFamily);
+    const font = getTitleFontString(deepMergedCopy(defaultTheme.legend.label, Object.assign({}, (_j = (_h = options.theme) === null || _h === void 0 ? void 0 : _h.legend) === null || _j === void 0 ? void 0 : _j.label)));
     const legendLabels = hasNestedPieSeries(series)
@@ -131,0 +132,0 @@ ? getNestedPieLegendLabels(series)

dist/esm/store/reactive.js

 import { isNull, pickProperty } from "../helpers/utils";
 import { message } from "../message";
 let currentCollectorObserver = null;
-let observerIdIndex = 0;
-let currentRunningObserverId = null;
+let currentRunningObserver = null;
 const observerCallCue = [];
 let doingInvisibleWork = false;
 export function observe(fn) {
-    const observeId = observerIdIndex;
-    observerIdIndex += 1;
     const observer = () => {
-        if (currentRunningObserverId === observeId) {
+        if (currentRunningObserver === observer) {
             return;
         }
-        if (doingInvisibleWork || !isNull(currentRunningObserverId)) {
+        // If there is observer running or doing invisible work
+        if (doingInvisibleWork || !isNull(currentRunningObserver)) {
             if (observerCallCue.includes(observer)) {
                 observerCallCue.splice(observerCallCue.indexOf(observer), 1);
             }
+            // We use observer call cue because avoid nested observer call.
             observerCallCue.push(observer);
+            // or If there are no observers running. Run the observer and run the next observer in the call queue.
         }
-        else if (isNull(currentRunningObserverId)) {
-            currentRunningObserverId = observeId;
+        else if (isNull(currentRunningObserver)) {
+            currentRunningObserver = observer;
             fn();
-            currentRunningObserverId = null;
+            currentRunningObserver = null;
             digestObserverCallCue();
@@ -29,2 +29,3 @@ }
     observer.deps = [];
+    // first observer excution for collect dependencies
     currentCollectorObserver = observer;
@@ -75,2 +76,3 @@ currentCollectorObserver();
             get: function () {
+                // It's some kind a trick to get observable information from closure using getter for notify()
                 if (currentCollectorObserver === observableInfo) {
@@ -82,2 +84,3 @@ return { target, key, value, obs };
                     !obs.includes(currentCollectorObserver)) {
+                    // if there is collector observer in running, collect current data as dependency
                     obs.push(currentCollectorObserver);
@@ -98,2 +101,3 @@ currentCollectorObserver.deps.push(obs);
                 if (prevValue !== value) {
+                    // Run observers
                     invokeObs(obs);
@@ -100,0 +104,0 @@ }

dist/esm/store/theme.js

 import { deepMergedCopy, omit } from "../helpers/utils";
 import { getNestedPieChartAliasNames, hasNestedPieSeries, hasOuterDataLabel, hasOuterPieSeriesName, } from "../helpers/pieSeries";
-import { axisTitleTheme, defaultSeriesTheme, getDefaultTheme } from "../helpers/theme";
+import { makeAxisTitleTheme, defaultSeriesTheme, getDefaultTheme } from "../helpers/theme";
 function getCommonSeriesOptions(options, series, isNestedPieChart) {
@@ -17,2 +17,3 @@ var _a, _b;
 function getThemeAppliedSecondaryYAxis(options) {
+    var _a, _b, _c;
     const theme = Object.assign({}, options.theme);
@@ -22,2 +23,3 @@ if (!Array.isArray(theme.yAxis)) {
     }
+    const axisTitleTheme = makeAxisTitleTheme((_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.chart) === null || _c === void 0 ? void 0 : _c.fontFamily);
     const yAxis = theme.yAxis.map((yAxisTheme) => deepMergedCopy({ title: Object.assign({}, axisTitleTheme) }, Object.assign({}, yAxisTheme)));
@@ -93,2 +95,3 @@ return Object.assign(Object.assign({}, theme), { yAxis });
 function getTheme(options, series) {
+    var _a, _b, _c;
     const isNestedPieChart = hasNestedPieSeries(series);
@@ -104,3 +107,4 @@ const commonSeriesOptions = getCommonSeriesOptions(options, series, isNestedPieChart);
     }
-    const theme = deepMergedCopy(getDefaultTheme(series, pieSeriesOuterAnchors, isNestedPieChart), getThemeOptionsWithSeriesName(options, series, commonSeriesOptions, isNestedPieChart));
+    const globalFontFamily = (_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.chart) === null || _c === void 0 ? void 0 : _c.fontFamily;
+    const theme = deepMergedCopy(getDefaultTheme(globalFontFamily, series, pieSeriesOuterAnchors, isNestedPieChart), getThemeOptionsWithSeriesName(options, series, commonSeriesOptions, isNestedPieChart));
     if (!series.heatmap) {
@@ -107,0 +111,0 @@ setColors(theme, series, commonSeriesOptions, isNestedPieChart);

package.json

 {
   "name": "@toast-ui/chart",
-  "version": "4.0.0-beta.4",
+  "version": "4.0.0-beta.5",
   "description": "TOAST UI Application: Chart",
@@ -71,7 +71,6 @@ "main": "dist/toastui-chart.js",
     "test:ci": "npm run validate && jest",
-    "build": "npm run build:clean && npm run build:prod && npm run build:polyfill && npm run build:minify && npm run build:esm",
+    "build": "npm run build:clean && npm run build:prod && npm run build:minify && npm run build:esm",
     "build:clean": "rm -rf ./dist",
     "build:prod": "webpack --mode=production",
     "build:minify": "webpack --mode=production --minify",
-    "build:polyfill": "webpack --mode=production --minify --polyfill",
     "build:esm": "ttsc -p tsconfig.esm.json",
@@ -82,3 +81,3 @@ "build:storybook": "build-storybook",
     "ts2js": "tsc --outDir tmpdoc --sourceMap false --target ES2015 --noEmit false",
-    "doc:dev": "npm run build:dev && npm run ts2js && tuidoc --serv",
+    "doc:dev": "npm run build:prod && npm run ts2js && tuidoc --serv",
     "doc": "npm run ts2js && tuidoc"
@@ -139,3 +138,3 @@ },
   },
-  "gitHead": "11d1a15e9876be719e6fe5ab1c84b58128535052"
+  "gitHead": "edf7093b6f83d70f284106900707ef39b068a755"
 }

README.md

@@ -1,1 +0,134 @@
-# chart README
+# ![Toast UI Chart](https://user-images.githubusercontent.com/35218826/37320160-c4d6dec4-26b5-11e8-9a91-79bb2b882410.png)
+
+> 🍞📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library
+
+[![npm](https://img.shields.io/npm/v/tui-chart.svg)](https://www.npmjs.com/package/tui-chart)
+
+## 🚩 Table of Contents
+
+- [!Toast UI Chart](#)
+  - [🚩 Table of Contents](#-table-of-contents)
+  - [Collect statistics on the use of open source](#collect-statistics-on-the-use-of-open-source)
+  - [💾 Install](#-install)
+    - [Via Package Manager](#via-package-manager)
+      - [npm](#npm)
+    - [Via Contents Delivery Network (CDN)](#via-contents-delivery-network-cdn)
+    - [Download Source Files](#download-source-files)
+  - [🔨 Usage](#-usage)
+    - [HTML](#html)
+    - [JavaScript](#javascript)
+      - [Load](#load)
+
+## Collect statistics on the use of open source
+
+TOAST UI Chart applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Chart is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following `usageStatistics` option when creating charts.
+
+```js
+const options = {
+  // ...
+  usageStatistics: false,
+};
+
+toastui.Chart.barChart({ el, data, options });
+```
+
+## 💾 Install
+
+The TOAST UI products can be installed by using the package manager or downloading the source directly.
+However, we highly recommend using the package manager.
+
+### Via Package Manager
+
+The TOAST UI products are registered in [npm](https://www.npmjs.com/) package manager.
+Install by using the commands provided by a package manager.
+When using npm, be sure [Node.js](https://nodejs.org) is installed in the environment.
+
+#### npm
+
+```sh
+$ npm install --save @toast-ui/chart # Latest version
+$ npm install --save @toast-ui/chart@<version> # Specific version
+```
+
+### Via Contents Delivery Network (CDN)
+
+The TOAST UI Chart is available over a CDN.
+
+- You can use cdn as below.
+
+```html
+<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" />
+<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>
+```
+
+- Within the download you'll find the following directories
+
+```
+- uicdn.toast.com/
+  ├─ chart/
+  │  ├─ latest
+  │  │  ├─ toastui-chart.js
+  │  │  ├─ toastui-chart.min.js
+  │  │  ├─ toastui-chart.css
+  │  │  ├─ toastui-chart.min.css
+  │  ├─ v4.0.0/
+```
+
+### Download Source Files
+
+- [Download all sources for each version](https://github.com/nhn/tui.chart/releases)
+
+## 🔨 Usage
+
+### HTML
+
+Add the container element where TOAST UI Chart will be created.
+
+```html
+<div id="chart"></div>
+```
+
+### JavaScript
+
+#### Load
+
+The TOAST UI Chart can be used by creating an instance with the constructor function. To access the constructor function, import the module using one of the three following methods depending on your environment.
+
+```js
+/* namespace */
+const chart = toastui.Chart;
+
+/* CommonJS in Node.js */
+const chart = require('@toast-ui/chart');
+
+/* ES6 in Node.js */
+import Chart from '@toast-ui/chart';
+import { LineChart } from '@toast-ui/chart';
+```
+
+Factory function needs three parameters: el, data, options
+
+- el: Wrapper HTML element that will contain the chart as a child.
+- data: Numerical data the chart will be based on.
+- options: Functional options including legend, alignment, and tooltip visibilities.
+
+```js
+var el = document.getElementById('chart');
+var data = {
+  categories: [
+    //...
+  ],
+  series: [
+    // ...
+  ],
+};
+var options = {
+  chart: { width: 700, height: 400 },
+};
+
+chart.barChart({ el, data, options });
+// or
+new BarChart({ el, data, options });
+```
+
+Refer to [details](https://nhn.github.io/tui.chart/latest) for additional information.

types/components/series.d.ts

@@ -322,1 +322,3 @@ import { Point, Rect, BezierPoint, BoxSeriesDataType } from '../options';
 }
+
+export type BackgroundModel = RectModel[];

types/index.d.ts

@@ -53,2 +53,3 @@ import {
   NestedPieSeriesType,
+  AxisLabelInfo,
 } from '@t/options';
@@ -75,2 +76,3 @@ import { LineChartProps } from '@src/charts/lineChart';
 import { AddSeriesDataInfo, SelectSeriesInfo } from '@src/charts/chart';
+import { TooltipData as TooltipDataInfo } from '@t/components/tooltip';
 
@@ -544,4 +546,6 @@ declare namespace toastui {
   EventListener,
+  TooltipDataInfo,
+  AxisLabelInfo,
 };
 
 export default toastui.Chart;

types/options.d.ts

 import { Categories, RawSeries, Options } from '@t/store/store';
-import { TooltipModel } from '@t/components/tooltip';
+import { TooltipData, TooltipModel } from '@t/components/tooltip';
 import { ScatterSeriesIconType } from '@t/components/series';
@@ -23,2 +23,3 @@ import {
 } from '@t/theme';
+import { AxisType } from '@src/component/axis';
 export type RangeDataType<T> = [T, T];
@@ -192,3 +193,4 @@ export type BoxSeriesDataType = number | RangeDataType<number>;
 
-type AxisFormatter = (value: string) => string;
+type AxisLabelInfo = { axisName: AxisType; labels: string[]; index: number };
+type AxisFormatter = (value: string, axisLabelInfo: AxisLabelInfo) => string;
 export type AxisTitleOption = Omit<TitleOption, 'align'>;
@@ -203,6 +205,7 @@ type AxisTitle = string | AxisTitleOption;
     interval?: number;
+    formatter?: AxisFormatter;
+    margin?: number;
   };
   scale?: Scale;
   title?: AxisTitle;
-  formatter?: AxisFormatter;
 } & BaseSizeOptions;
@@ -226,2 +229,4 @@
     interval?: number;
+    formatter?: AxisFormatter;
+    margin?: number;
     rotatable?: boolean;
@@ -270,2 +275,3 @@ };
 
+type TooltipFormatter = (value: SeriesDataType, tooltipDataInfo?: TooltipData) => string;
 type ValueFormatter = (value: SeriesDataType) => string;
@@ -284,3 +290,4 @@ export type DefaultTooltipTemplate = { header: string; body: string };
   offsetY?: number;
-  formatter?: ValueFormatter;
+  formatter?: TooltipFormatter;
+  transition?: string | boolean;
 }
@@ -287,0 +294,0 @@

types/store/store.d.ts

@@ -150,2 +150,3 @@ import {
 export interface Layout {
+  chart: Rect;
   xAxis: Rect;
@@ -152,0 +153,0 @@ yAxis: Rect;

types/theme.d.ts

@@ -43,2 +43,3 @@ import { SectorStyle } from '@src/brushes/sector';
   fontFamily?: string;
+  backgroundColor?: string;
 };
@@ -261,3 +262,3 @@
 interface BaseThemeOptions {
-  chart?: ChartTheme; // @TODO: 작업 필요
+  chart?: ChartTheme;
   title?: FontTheme;
@@ -264,0 +265,0 @@ yAxis?: AxisTheme | AxisTheme[];

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

258

increased by0.39%

Lines of code

56310

increased by12.21%

Number of lines in readme file

135

increased by6650%

Worsened metrics

Total package byte prevSize

3131213

decreased by-4.76%

No dependency changes