abstract-chart - npm Package Compare versions

Comparing version 6.0.0 to 7.0.0

CHANGELOG.md

@@ -5,2 +5,36 @@ # Change Log
 
+## [7.0.0] - 2024-05-06
+
+### Added
+
+- Chart padding
+- Overridable font sizes for all texts.
+- Discrete axises
+- Rotate tick labels
+- Disp tick labels
+
+### Changed
+
+- Separate x-grid & y-grid
+- Separate styling of all axises
+- Previous chart padding was {top: 40, right: 80, bottom: 40, left: 80}. New default padding is depending on axises.
+
+### Example migrate 6 -> 7
+
+- { ... gridColor: AI.black; gridThickness: 1; ... } ->
+  { ... xGrid: { color: AI.black; thickness: 1 }, yGrid: { color: AI.black; thickness: 1 }, yGrid: { color: AI.black; thickness: 1 }, xAxisBottom: {... axisColor: AI.black, thickness: 1 ...}, yAxisLeft: {... axisColor: AI.black, thickness: 1 ...} ... };
+- { ... ... } - > { ... padding: {top: 40, right: 80, bottom: 40, left: 80} ... }
+
+## [6.0.0] - 2024-04-05
+
+### Added
+
+### Changed
+
+- React 16 -> 18
+
+### Removed
+
+- Rambda
+
 ## [4.0.1](https://github.com/promaster-sdk/property/compare/abstract-chart@3.2.3...master)
@@ -16,4 +50,2 @@
 
-- Ramda
-
 ## [v3.2.1](https://github.com/promaster-sdk/property/compare/abstract-chart@3.0.0...abstract-chart@3.2.1) - 2022-06-02
@@ -20,0 +52,0 @@

lib/axis.d.ts

@@ -1,23 +0,43 @@
-import * as AbstractImage from "abstract-image";
-export declare type Axis = LinearAxis | LogarithmicAxis;
-export interface LinearAxis {
+import * as AI from "abstract-image";
+export type Axis = LinearAxis | LogarithmicAxis | DiscreteAxis;
+export type AxisBase = {
+    readonly label: string;
+    readonly labelRotation?: number;
+    readonly tickLabelDisp?: number;
+    readonly labelColor?: AI.Color;
+    readonly tickLabelColor?: AI.Color;
+    readonly thickness?: number;
+    readonly axisColor?: AI.Color;
+    readonly tickFontSize?: number;
+    readonly axisFontSize?: number;
+};
+export type LinearAxis = AxisBase & {
     readonly type: "linear";
     readonly min: number;
     readonly max: number;
-    readonly label: string;
-}
-export declare function createLinearAxis(min: number, max: number, label: string): LinearAxis;
-export interface LogarithmicAxis {
+};
+export declare function createLinearAxis(min: number, max: number, label: string, labelColor?: AI.Color, labelRotation?: number, tickLabelDisp?: number, thickness?: number, axisColor?: AI.Color): LinearAxis;
+export type LogarithmicAxis = AxisBase & {
     readonly type: "logarithmic";
     readonly min: number;
     readonly max: number;
-    readonly label: string;
+};
+export declare function createLogarithmicAxis(min: number, max: number, label: string, labelColor?: AI.Color, labelRotation?: number, tickLabelDisp?: number, thickness?: number, axisColor?: AI.Color): LogarithmicAxis;
+export type DiscreteAxis = AxisBase & {
+    readonly type: "discrete";
+    readonly points: ReadonlyArray<DiscreteAxisPoint>;
+};
+export interface DiscreteAxisPoint {
+    readonly value: number;
+    readonly label?: string;
 }
-export declare function createLogarithmicAxis(min: number, max: number, label: string): LogarithmicAxis;
-export declare function getTicks(desiredTicks: number, axis: Axis): Array<number>;
-export declare function getLinearTicks(desiredTicks: number, min: number, max: number): Array<number>;
-export declare function getLogarithmicTicks(desiredTicks: number, min: number, max: number): Array<number>;
-export declare function transformPoint(point: AbstractImage.Point, xMin: number, xMax: number, yMin: number, yMax: number, xAxis: Axis | undefined, yAxis: Axis | undefined): AbstractImage.Point;
+export declare function createDiscreteAxis(points: ReadonlyArray<DiscreteAxisPoint>, label: string, labelColor?: AI.Color, labelRotation?: number, tickLabelDisp?: number, thickness?: number, axisColor?: AI.Color): DiscreteAxis;
+export declare function getTicks(desiredTicks: number, axis: Axis): ReadonlyArray<DiscreteAxisPoint>;
+export declare function getLinearTicks(desiredTicks: number, min: number, max: number): ReadonlyArray<DiscreteAxisPoint>;
+export declare function getLogarithmicTicks(desiredTicks: number, min: number, max: number): ReadonlyArray<DiscreteAxisPoint>;
+export declare function transformPoint(point: AI.Point, xMin: number, xMax: number, yMin: number, yMax: number, xAxis: Axis | undefined, yAxis: Axis | undefined): AI.Point;
 export declare function transformValue(value: number, min: number, max: number, axis: Axis | undefined): number;
 export declare function inverseTransformValue(value: number, min: number, max: number, axis: Axis | undefined): number;
+export declare function axisMin(axis: Axis): number;
+export declare function axisMax(axis: Axis): number;
 export declare function linearTransform(value: number, min: number, max: number): number;
@@ -24,0 +44,0 @@ export declare function logarithmicTransform(value: number, min: number, max: number): number;

lib/axis.js

 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
@@ -22,22 +26,17 @@ if (k2 === undefined) k2 = k;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.inverseLogarithmicTransform = exports.inverseLinearTransform = exports.logarithmicTransform = exports.linearTransform = exports.inverseTransformValue = exports.transformValue = exports.transformPoint = exports.getLogarithmicTicks = exports.getLinearTicks = exports.getTicks = exports.createLogarithmicAxis = exports.createLinearAxis = void 0;
-const AbstractImage = __importStar(require("abstract-image"));
-function createLinearAxis(min, max, label) {
-    return {
-        type: "linear",
-        min: min,
-        max: max,
-        label: label,
-    };
+exports.inverseLogarithmicTransform = exports.inverseLinearTransform = exports.logarithmicTransform = exports.linearTransform = exports.axisMax = exports.axisMin = exports.inverseTransformValue = exports.transformValue = exports.transformPoint = exports.getLogarithmicTicks = exports.getLinearTicks = exports.getTicks = exports.createDiscreteAxis = exports.createLogarithmicAxis = exports.createLinearAxis = void 0;
+const AI = __importStar(require("abstract-image"));
+const ts_exhaustive_check_1 = require("ts-exhaustive-check");
+function createLinearAxis(min, max, label, labelColor, labelRotation, tickLabelDisp, thickness, axisColor) {
+    return { type: "linear", min, max, label, labelColor, labelRotation, tickLabelDisp, thickness, axisColor };
 }
 exports.createLinearAxis = createLinearAxis;
-function createLogarithmicAxis(min, max, label) {
-    return {
-        type: "logarithmic",
-        min: min,
-        max: max,
-        label: label,
-    };
+function createLogarithmicAxis(min, max, label, labelColor, labelRotation, tickLabelDisp, thickness, axisColor) {
+    return { type: "logarithmic", min, max, labelColor, label, labelRotation, tickLabelDisp, thickness, axisColor };
 }
 exports.createLogarithmicAxis = createLogarithmicAxis;
+function createDiscreteAxis(points, label, labelColor, labelRotation, tickLabelDisp, thickness, axisColor) {
+    return { type: "discrete", points, labelColor, label, labelRotation, tickLabelDisp, thickness, axisColor };
+}
+exports.createDiscreteAxis = createDiscreteAxis;
 const linearMultiples = [1, 2, 5];
@@ -51,3 +50,6 @@ const linearPowers = [-2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
             return getLogarithmicTicks(desiredTicks, axis.min, axis.max);
+        case "discrete":
+            return axis.points;
         default:
+            (0, ts_exhaustive_check_1.exhaustiveCheck)(axis);
             return [];
@@ -67,15 +69,7 @@ }
             if (!best || Math.abs(best.ticks - desiredTicks) > Math.abs(ticks - desiredTicks)) {
-                best = {
-                    min: cMin * step,
-                    step: step,
-                    ticks: ticks,
-                };
+                best = { min: cMin * step, step: step, ticks: ticks };
             }
         }
     }
-    if (!best) {
-        return [];
-    }
-    const b = best;
-    return range(0, b.ticks).map((l) => b.min + b.step * l);
+    return best ? range(0, best.ticks).map((l) => ({ value: best.min + best.step * l })) : [];
 }
@@ -98,9 +92,8 @@ exports.getLinearTicks = getLinearTicks;
             const base = Math.pow(10, power);
-            const powerLines = stepAlt.map((i) => i * base);
+            const powerLines = stepAlt.map((i) => ({ value: i * base }));
             return lines.concat(powerLines);
         }, []);
-        return altLines.filter((l) => l >= min && l <= max);
+        return altLines.filter((l) => l.value >= min && l.value <= max);
     });
-    const bestLines = alternatives.reduce((prev, alt) => Math.abs(alt.length - desiredTicks) < Math.abs(prev.length - desiredTicks) ? alt : prev);
-    return bestLines;
+    return alternatives.reduce((prev, alt) => Math.abs(alt.length - desiredTicks) < Math.abs(prev.length - desiredTicks) ? alt : prev);
 }
@@ -111,3 +104,3 @@ exports.getLogarithmicTicks = getLogarithmicTicks;
     const y = transformValue(point.y, yMin, yMax, yAxis);
-    return AbstractImage.createPoint(x, y);
+    return AI.createPoint(x, y);
 }
@@ -122,6 +115,9 @@ exports.transformPoint = transformPoint;
         case "linear":
-            return min + range * linearTransform(value, axis.min, axis.max);
+            return min + range * linearTransform(value, axisMin(axis), axisMax(axis));
         case "logarithmic":
-            return min + range * logarithmicTransform(value, axis.min, axis.max);
+            return min + range * logarithmicTransform(value, axisMin(axis), axisMax(axis));
+        case "discrete":
+            return min + range * linearTransform(value, axisMin(axis), axisMax(axis));
         default:
+            (0, ts_exhaustive_check_1.exhaustiveCheck)(axis);
             return 0;
@@ -138,6 +134,9 @@ }
         case "linear":
-            return inverseLinearTransform((value - min) / range, axis.min, axis.max);
+            return inverseLinearTransform((value - min) / range, axisMin(axis), axisMax(axis));
         case "logarithmic":
-            return inverseLogarithmicTransform((value - min) / range, axis.min, axis.max);
+            return inverseLogarithmicTransform((value - min) / range, axisMin(axis), axisMax(axis));
+        case "discrete":
+            return inverseLinearTransform((value - min) / range, axisMin(axis), axisMax(axis));
         default:
+            (0, ts_exhaustive_check_1.exhaustiveCheck)(axis);
             return 0;
@@ -147,2 +146,30 @@ }
 exports.inverseTransformValue = inverseTransformValue;
+function axisMin(axis) {
+    var _a, _b;
+    switch (axis.type) {
+        case "linear":
+        case "logarithmic":
+            return axis.min;
+        case "discrete":
+            return (_b = (_a = axis.points[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0;
+        default:
+            (0, ts_exhaustive_check_1.exhaustiveCheck)(axis);
+            return 0;
+    }
+}
+exports.axisMin = axisMin;
+function axisMax(axis) {
+    var _a, _b;
+    switch (axis.type) {
+        case "linear":
+        case "logarithmic":
+            return axis.max;
+        case "discrete":
+            return (_b = (_a = axis.points.at(-1)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0;
+        default:
+            (0, ts_exhaustive_check_1.exhaustiveCheck)(axis);
+            return 0;
+    }
+}
+exports.axisMax = axisMax;
 function linearTransform(value, min, max) {
@@ -149,0 +176,0 @@ return (value - min) / (max - min);

lib/chart.d.ts

@@ -1,7 +0,7 @@
-import * as AbstractImage from "abstract-image";
+import * as AI from "abstract-image";
 import * as Axis from "./axis";
-export declare type Partial<T> = {
+export type Partial<T> = {
     [P in keyof T]?: T[P];
 };
-export declare type LabelLayout = "original" | "end" | "center";
+export type LabelLayout = "original" | "end" | "center";
 export interface Chart {
@@ -17,28 +17,40 @@ readonly width: number;
     readonly yAxisRight: Axis.Axis | undefined;
-    readonly backgroundColor: AbstractImage.Color;
-    readonly gridColor: AbstractImage.Color;
-    readonly gridThickness: number;
+    readonly backgroundColor: AI.Color;
+    readonly xGrid: ChartGrid;
+    readonly yGrid: ChartGrid;
     readonly font: string;
     readonly fontSize: number;
     readonly labelLayout: LabelLayout;
+    readonly padding: Padding;
 }
-export declare type ChartProps = Partial<Chart>;
+export type ChartGrid = {
+    readonly color: AI.Color;
+    readonly thickness: number;
+};
+export type ChartProps = Partial<Chart>;
 export declare function createChart(props: ChartProps): Chart;
-export declare type XAxis = "bottom" | "top";
-export declare type YAxis = "left" | "right";
-export declare type ChartPointShape = "circle" | "triangle" | "square";
+type Padding = {
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+};
+export type XAxis = "bottom" | "top";
+export type YAxis = "left" | "right";
+export type ChartPointShape = "circle" | "triangle" | "square";
 export interface ChartPoint {
     readonly shape: ChartPointShape;
-    readonly position: AbstractImage.Point;
-    readonly color: AbstractImage.Color;
-    readonly size: AbstractImage.Size;
+    readonly position: AI.Point;
+    readonly color: AI.Color;
+    readonly size: AI.Size;
     readonly label: string;
     readonly xAxis: XAxis;
     readonly yAxis: YAxis;
+    readonly fontSize?: number;
 }
-export declare type ChartPointProps = Partial<ChartPoint>;
+export type ChartPointProps = Partial<ChartPoint>;
 export declare function createChartPoint(props?: ChartPointProps): ChartPoint;
 export interface ChartLine {
-    readonly points: Array<AbstractImage.Point>;
-    readonly color: AbstractImage.Color;
+    readonly points: Array<AI.Point>;
+    readonly color: AI.Color;
     readonly thickness: number;
@@ -48,10 +60,11 @@ readonly label: string;
     readonly yAxis: YAxis;
+    readonly fontSize?: number;
 }
-export declare type ChartLineProps = Partial<ChartLine>;
+export type ChartLineProps = Partial<ChartLine>;
 export declare function createChartLine(props: ChartLineProps): ChartLine;
 export interface ChartStackConfig {
-    readonly color: AbstractImage.Color;
+    readonly color: AI.Color;
     readonly label: string;
 }
-export declare type ChartStackConfigProps = Partial<ChartStackConfig>;
+export type ChartStackConfigProps = Partial<ChartStackConfig>;
 export declare function createChartStackConfig(props: ChartStackConfigProps): ChartStackConfig;
@@ -68,20 +81,27 @@ export interface StackPoints {
 }
-export declare type ChartStackProps = Partial<ChartStack>;
+export type ChartStackProps = Partial<ChartStack>;
 export declare function createChartStack(props: ChartStackProps): ChartStack;
-export declare function inverseTransformPoint(point: AbstractImage.Point, chart: Chart, xAxis: XAxis, yAxis: YAxis): AbstractImage.Point | undefined;
-export declare function renderChart(chart: Chart): AbstractImage.AbstractImage;
-export declare function generateBackground(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AbstractImage.Component;
-export declare function generateXAxisBottom(xNumTicks: number, xAxisBottom: Axis.Axis | undefined, xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AbstractImage.Component;
-export declare function generateXAxisTop(xNumTicks: number, xAxisTop: Axis.Axis | undefined, xMin: number, xMax: number, yMax: number, chart: Chart): AbstractImage.Component;
-export declare function generateYAxisLeft(yNumTicks: number, yAxisLeft: Axis.Axis | undefined, xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AbstractImage.Component;
-export declare function generateYAxisRight(yNumTicks: number, yAxisRight: Axis.Axis | undefined, xMax: number, yMin: number, yMax: number, chart: Chart): AbstractImage.Component;
-export declare function generateStack(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AbstractImage.Component;
-export declare function generateLines(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AbstractImage.Component;
-export declare function generatePoints(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AbstractImage.Component;
-export declare function generateXAxisGridLines(xMin: number, xMax: number, yMin: number, yMax: number, xTicks: Array<number>, xAxis: Axis.Axis, chart: Chart): AbstractImage.Component;
-export declare function generateXAxisLabels(xMin: number, xMax: number, y: number, growVertical: AbstractImage.GrowthDirection, xTicks: Array<number>, xAxis: Axis.Axis, chart: Chart): AbstractImage.Component;
-export declare function generateXAxisLabel(x: number, y: number, horizontalGrowthDirection: AbstractImage.GrowthDirection, verticalGrowthDirection: AbstractImage.GrowthDirection, label: string, chart: Chart): AbstractImage.Component;
-export declare function generateYAxisLines(xMin: number, xMax: number, yMin: number, yMax: number, yTicks: Array<number>, yAxis: Axis.Axis, chart: Chart): AbstractImage.Component;
-export declare function generateYAxisLabels(x: number, yMin: number, yMax: number, growHorizontal: AbstractImage.GrowthDirection, yTicks: Array<number>, yAxis: Axis.Axis, chart: Chart): AbstractImage.Component;
-export declare function generateYAxisLabel(x: number, y: number, horizontalGrowthDirection: AbstractImage.GrowthDirection, verticalGrowthDirection: AbstractImage.GrowthDirection, label: string, chart: Chart): AbstractImage.Component;
+export declare function inverseTransformPoint(point: AI.Point, chart: Chart, xAxis: XAxis, yAxis: YAxis, padding: Padding): AI.Point | undefined;
+export declare function renderChart(chart: Chart): AI.AbstractImage;
+export declare function generateBackground(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component;
+export declare function generateXAxisBottom(xNumTicks: number, axis: Axis.Axis | undefined, xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component;
+export declare function generateXAxisTop(xNumTicks: number, axis: Axis.Axis | undefined, xMin: number, xMax: number, yMax: number, chart: Chart): AI.Component;
+export declare function generateYAxisLeft(yNumTicks: number, axis: Axis.Axis | undefined, xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component;
+export declare function generateYAxisRight(yNumTicks: number, axis: Axis.Axis | undefined, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component;
+export declare function generateStack(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component;
+export declare function generateLines(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component;
+export declare function generatePoints(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component;
+export declare function generateXAxisGridLines(xMin: number, xMax: number, yMin: number, yMax: number, xTicks: ReadonlyArray<Axis.DiscreteAxisPoint>, xAxis: Axis.Axis, grid: {
+    readonly color: AI.Color;
+    readonly thickness: number;
+}): AI.Component;
+export declare function generateXAxisLabels(xMin: number, xMax: number, y: number, growVertical: AI.GrowthDirection, ticks: ReadonlyArray<Axis.DiscreteAxisPoint>, axis: Axis.Axis, chart: Chart): AI.Component;
+export declare function generateXAxisLabel(x: number, y: number, horizontalGrowthDirection: AI.GrowthDirection, verticalGrowthDirection: AI.GrowthDirection, axis: Axis.Axis, chart: Chart): AI.Component;
+export declare function generateYAxisLines(xMin: number, xMax: number, yMin: number, yMax: number, yTicks: ReadonlyArray<Axis.DiscreteAxisPoint>, yAxis: Axis.Axis, grid: {
+    readonly color: AI.Color;
+    readonly thickness: number;
+}): AI.Component;
+export declare function generateYAxisLabels(x: number, yMin: number, yMax: number, growHorizontal: AI.GrowthDirection, yTicks: ReadonlyArray<Axis.DiscreteAxisPoint>, yAxis: Axis.Axis, chart: Chart): AI.Component;
+export declare function generateYAxisLabel(x: number, y: number, horizontalGrowthDirection: AI.GrowthDirection, verticalGrowthDirection: AI.GrowthDirection, axis: Axis.Axis, chart: Chart): AI.Component;
+export {};
 //# sourceMappingURL=chart.d.ts.map

lib/chart.js

 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
@@ -23,23 +27,29 @@ if (k2 === undefined) k2 = k;
 exports.generateYAxisLabel = exports.generateYAxisLabels = exports.generateYAxisLines = exports.generateXAxisLabel = exports.generateXAxisLabels = exports.generateXAxisGridLines = exports.generatePoints = exports.generateLines = exports.generateStack = exports.generateYAxisRight = exports.generateYAxisLeft = exports.generateXAxisTop = exports.generateXAxisBottom = exports.generateBackground = exports.renderChart = exports.inverseTransformPoint = exports.createChartStack = exports.createChartStackConfig = exports.createChartLine = exports.createChartPoint = exports.createChart = void 0;
-const AbstractImage = __importStar(require("abstract-image"));
+const AI = __importStar(require("abstract-image"));
 const Axis = __importStar(require("./axis"));
 const ts_exhaustive_check_1 = require("ts-exhaustive-check");
 function createChart(props) {
-    const { width = 600, height = 400, chartPoints = [], chartLines = [], chartStack = createChartStack({}), xAxisBottom = Axis.createLinearAxis(0, 100, ""), xAxisTop = undefined, yAxisLeft = Axis.createLinearAxis(0, 100, ""), yAxisRight = undefined, backgroundColor = AbstractImage.white, gridColor = AbstractImage.gray, gridThickness = 1, font = "Arial", fontSize = 12, labelLayout = "original", } = props || {};
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
     return {
-        width,
-        height,
-        chartPoints,
-        chartLines,
-        chartStack,
-        xAxisBottom,
-        xAxisTop,
-        yAxisLeft,
-        yAxisRight,
-        backgroundColor,
-        gridColor,
-        gridThickness,
-        font,
-        fontSize,
-        labelLayout,
+        width: (_a = props.width) !== null && _a !== void 0 ? _a : 600,
+        height: (_b = props.height) !== null && _b !== void 0 ? _b : 600,
+        chartPoints: (_c = props.chartPoints) !== null && _c !== void 0 ? _c : [],
+        chartLines: (_d = props.chartLines) !== null && _d !== void 0 ? _d : [],
+        chartStack: (_e = props.chartStack) !== null && _e !== void 0 ? _e : createChartStack({}),
+        xAxisBottom: (_f = props.xAxisBottom) !== null && _f !== void 0 ? _f : Axis.createLinearAxis(0, 100, ""),
+        xAxisTop: (_g = props.xAxisTop) !== null && _g !== void 0 ? _g : undefined,
+        yAxisLeft: (_h = props.yAxisLeft) !== null && _h !== void 0 ? _h : Axis.createLinearAxis(0, 100, ""),
+        yAxisRight: (_j = props.yAxisRight) !== null && _j !== void 0 ? _j : undefined,
+        backgroundColor: (_k = props.backgroundColor) !== null && _k !== void 0 ? _k : AI.white,
+        font: (_l = props.font) !== null && _l !== void 0 ? _l : "Arial",
+        fontSize: (_m = props.fontSize) !== null && _m !== void 0 ? _m : 12,
+        labelLayout: (_o = props.labelLayout) !== null && _o !== void 0 ? _o : "original",
+        padding: {
+            top: (_q = (_p = props.padding) === null || _p === void 0 ? void 0 : _p.top) !== null && _q !== void 0 ? _q : (props.xAxisTop !== undefined ? 45 : 10),
+            right: (_s = (_r = props.padding) === null || _r === void 0 ? void 0 : _r.right) !== null && _s !== void 0 ? _s : (props.yAxisRight !== undefined ? 45 : 10),
+            bottom: (_u = (_t = props.padding) === null || _t === void 0 ? void 0 : _t.bottom) !== null && _u !== void 0 ? _u : (props.xAxisBottom === undefined ? 10 : 45),
+            left: (_w = (_v = props.padding) === null || _v === void 0 ? void 0 : _v.left) !== null && _w !== void 0 ? _w : (!props.yAxisLeft === undefined ? 10 : 45),
+        },
+        xGrid: { color: (_y = (_x = props.xGrid) === null || _x === void 0 ? void 0 : _x.color) !== null && _y !== void 0 ? _y : AI.gray, thickness: (_0 = (_z = props.xGrid) === null || _z === void 0 ? void 0 : _z.thickness) !== null && _0 !== void 0 ? _0 : 1 },
+        yGrid: { color: (_2 = (_1 = props.yGrid) === null || _1 === void 0 ? void 0 : _1.color) !== null && _2 !== void 0 ? _2 : AI.gray, thickness: (_4 = (_3 = props.yGrid) === null || _3 === void 0 ? void 0 : _3.thickness) !== null && _4 !== void 0 ? _4 : 1 },
     };
@@ -49,32 +59,14 @@ }
 function createChartPoint(props) {
-    const { shape = "circle", position = AbstractImage.createPoint(0, 0), color = AbstractImage.black, size = AbstractImage.createSize(6, 6), label = "", xAxis = "bottom", yAxis = "left", } = props || {};
-    return {
-        shape,
-        position,
-        color,
-        size,
-        label,
-        xAxis,
-        yAxis,
-    };
+    const { shape = "circle", position = AI.createPoint(0, 0), color = AI.black, size = AI.createSize(6, 6), label = "", xAxis = "bottom", yAxis = "left", } = props || {};
+    return { shape, position, color, size, label, xAxis, yAxis };
 }
 exports.createChartPoint = createChartPoint;
 function createChartLine(props) {
-    const { points = [], color = AbstractImage.black, thickness = 1, label = "", xAxis = "bottom", yAxis = "left", } = props || {};
-    return {
-        points,
-        color,
-        thickness,
-        label,
-        xAxis,
-        yAxis,
-    };
+    const { points = [], color = AI.black, thickness = 1, label = "", xAxis = "bottom", yAxis = "left" } = props || {};
+    return { points, color, thickness, label, xAxis, yAxis };
 }
 exports.createChartLine = createChartLine;
 function createChartStackConfig(props) {
-    const { color = AbstractImage.black, label = "" } = props || {};
-    return {
-        color,
-        label,
-    };
+    const { color = AI.black, label = "" } = props || {};
+    return { color, label };
 }
@@ -84,16 +76,10 @@ exports.createChartStackConfig = createChartStackConfig;
     const { points = [], xAxis = "bottom", yAxis = "left", config = [createChartStackConfig({})] } = props || {};
-    return {
-        points,
-        xAxis,
-        yAxis,
-        config,
-    };
+    return { points, xAxis, yAxis, config };
 }
 exports.createChartStack = createChartStack;
-const padding = 80;
-function inverseTransformPoint(point, chart, xAxis, yAxis) {
-    const xMin = padding;
-    const xMax = chart.width - padding;
-    const yMin = chart.height - 0.5 * padding;
-    const yMax = 0.5 * padding;
+function inverseTransformPoint(point, chart, xAxis, yAxis, padding) {
+    const xMin = padding.left;
+    const xMax = chart.width - padding.right;
+    const yMin = chart.height - padding.bottom;
+    const yMax = padding.top;
     const x = Axis.inverseTransformValue(point.x, xMin, xMax, xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom);
@@ -104,13 +90,13 @@ const y = Axis.inverseTransformValue(point.y, yMin, yMax, yAxis === "right" ? chart.yAxisRight : chart.yAxisLeft);
     }
-    return AbstractImage.createPoint(x, y);
+    return AI.createPoint(x, y);
 }
 exports.inverseTransformPoint = inverseTransformPoint;
 function renderChart(chart) {
-    const { width, height, xAxisBottom, xAxisTop, yAxisLeft, yAxisRight } = chart;
-    const gridWidth = width - 2 * padding;
-    const gridHeight = height - padding;
-    const xMin = padding;
-    const xMax = width - padding;
-    const yMin = height - 0.5 * padding;
-    const yMax = 0.5 * padding;
+    const { width, height, xAxisBottom, xAxisTop, yAxisLeft, yAxisRight, padding } = chart;
+    const gridWidth = width - padding.left - padding.right;
+    const gridHeight = height - padding.bottom - padding.top;
+    const xMin = padding.left;
+    const xMax = width - padding.right;
+    const yMin = height - padding.bottom;
+    const yMax = padding.top;
     const renderedBackground = generateBackground(xMin, xMax, yMin, yMax, chart);
@@ -136,30 +122,32 @@ const xNumTicks = gridWidth / 40;
     ];
-    const topLeft = AbstractImage.createPoint(0, 0);
-    const size = AbstractImage.createSize(width, height);
-    return AbstractImage.createAbstractImage(topLeft, size, AbstractImage.white, components);
+    const topLeft = AI.createPoint(0, 0);
+    const size = AI.createSize(width, height);
+    return AI.createAbstractImage(topLeft, size, AI.white, components);
 }
 exports.renderChart = renderChart;
 function generateBackground(xMin, xMax, yMin, yMax, chart) {
-    const topLeft = AbstractImage.createPoint(xMin, yMax);
-    const bottomRight = AbstractImage.createPoint(xMax, yMin);
-    return AbstractImage.createRectangle(topLeft, bottomRight, chart.gridColor, chart.gridThickness, chart.backgroundColor);
+    return AI.createRectangle(AI.createPoint(xMin, yMax), AI.createPoint(xMax, yMin), AI.transparent, 0, chart.backgroundColor);
 }
 exports.generateBackground = generateBackground;
-function generateXAxisBottom(xNumTicks, xAxisBottom, xMin, xMax, yMin, yMax, chart) {
-    if (!xAxisBottom) {
-        return AbstractImage.createGroup("XAxisBottom", []);
+function generateXAxisBottom(xNumTicks, axis, xMin, xMax, yMin, yMax, chart) {
+    var _a, _b, _c, _d;
+    const components = Array();
+    if (!axis) {
+        return AI.createGroup("XAxisBottom", components);
     }
-    const xTicks = Axis.getTicks(xNumTicks, xAxisBottom);
-    const xLines = generateXAxisGridLines(xMin, xMax, yMin + 10, yMax, xTicks, xAxisBottom, chart);
-    const xLabels = generateXAxisLabels(xMin, xMax, yMin + 10, "down", xTicks, xAxisBottom, chart);
-    let xLabel;
+    const axisLabelPosY = yMin + chart.padding.bottom - chart.fontSize;
+    const xTicks = Axis.getTicks(xNumTicks, axis);
+    if (chart.xGrid) {
+        components.push(generateXAxisGridLines(xMin, xMax, yMin + 10, yMax, xTicks, axis, chart.xGrid));
+    }
+    components.push(AI.createLine({ x: xMin, y: yMin }, { x: xMax, y: yMin }, (_a = axis.axisColor) !== null && _a !== void 0 ? _a : AI.gray, (_b = axis.thickness) !== null && _b !== void 0 ? _b : 1), generateXAxisLabels(xMin, xMax, yMin + ((_c = axis.tickLabelDisp) !== null && _c !== void 0 ? _c : 10), "down", xTicks, axis, chart));
     switch (chart.labelLayout) {
         case "original":
-            xLabel = generateXAxisLabel(xMax + 0.5 * padding, yMin + 10, "uniform", "down", xAxisBottom.label, chart);
+            components.push(generateXAxisLabel(xMax + chart.padding.right, yMin + ((_d = axis.tickLabelDisp) !== null && _d !== void 0 ? _d : 10), "uniform", "down", axis, chart));
             break;
         case "end":
-            xLabel = generateXAxisLabel(xMax, yMin + 25, "left", "down", xAxisBottom.label, chart);
+            components.push(generateXAxisLabel(xMax, axisLabelPosY, "left", "down", axis, chart));
             break;
         case "center":
-            xLabel = generateXAxisLabel((xMin + xMax) / 2, yMin + 25, "uniform", "down", xAxisBottom.label, chart);
+            components.push(generateXAxisLabel((xMin + xMax) / 2, axisLabelPosY, "uniform", "down", axis, chart));
             break;
@@ -169,22 +157,26 @@ default:
     }
-    return AbstractImage.createGroup("XAxisBottom", [xLines, xLabels, xLabel]);
+    return AI.createGroup("XAxisBottom", components);
 }
 exports.generateXAxisBottom = generateXAxisBottom;
-function generateXAxisTop(xNumTicks, xAxisTop, xMin, xMax, yMax, chart) {
-    if (!xAxisTop) {
-        return AbstractImage.createGroup("XAxisTop", []);
+function generateXAxisTop(xNumTicks, axis, xMin, xMax, yMax, chart) {
+    var _a, _b, _c, _d;
+    const components = Array();
+    if (!axis) {
+        return AI.createGroup("XAxisTop", components);
     }
-    const xTicks2 = Axis.getTicks(xNumTicks, xAxisTop);
-    const xLines2 = generateXAxisGridLines(xMin, xMax, yMax - 10, yMax, xTicks2, xAxisTop, chart);
-    const xLabels2 = generateXAxisLabels(xMin, xMax, yMax - 13, "up", xTicks2, xAxisTop, chart);
-    let xLabel2;
+    const axisLabelPosY = yMax - chart.padding.top + chart.fontSize;
+    const xTicks = Axis.getTicks(xNumTicks, axis);
+    if (chart.xGrid) {
+        components.push(generateXAxisGridLines(xMin, xMax, yMax - 10, yMax, xTicks, axis, chart.xGrid));
+    }
+    components.push(AI.createLine({ x: xMin, y: yMax }, { x: xMax, y: yMax }, (_a = axis.axisColor) !== null && _a !== void 0 ? _a : AI.gray, (_b = axis.thickness) !== null && _b !== void 0 ? _b : 1), generateXAxisLabels(xMin, xMax, yMax - ((_c = axis.tickLabelDisp) !== null && _c !== void 0 ? _c : 13), "up", xTicks, axis, chart));
     switch (chart.labelLayout) {
         case "original":
-            xLabel2 = generateXAxisLabel(xMax + 0.5 * padding, yMax - 13, "uniform", "up", xAxisTop.label, chart);
+            components.push(generateXAxisLabel(xMax + 0.5 * chart.padding.right, yMax - ((_d = axis.tickLabelDisp) !== null && _d !== void 0 ? _d : 13), "uniform", "up", axis, chart));
             break;
         case "end":
-            xLabel2 = generateXAxisLabel(xMax, yMax - 30, "left", "up", xAxisTop.label, chart);
+            components.push(generateXAxisLabel(xMax, axisLabelPosY, "left", "up", axis, chart));
             break;
         case "center":
-            xLabel2 = generateXAxisLabel((xMin + xMax) / 2, yMax - 30, "uniform", "up", xAxisTop.label, chart);
+            components.push(generateXAxisLabel((xMin + xMax) / 2, axisLabelPosY, "uniform", "up", axis, chart));
             break;
@@ -194,23 +186,26 @@ default:
     }
-    return AbstractImage.createGroup("XAxisTop", [xLines2, xLabels2, xLabel2]);
+    return AI.createGroup("XAxisTop", components);
 }
 exports.generateXAxisTop = generateXAxisTop;
-function generateYAxisLeft(yNumTicks, yAxisLeft, xMin, xMax, yMin, yMax, chart) {
-    if (!yAxisLeft) {
-        return AbstractImage.createGroup("YAxisLeft", []);
+function generateYAxisLeft(yNumTicks, axis, xMin, xMax, yMin, yMax, chart) {
+    var _a, _b, _c;
+    const components = Array();
+    if (!axis) {
+        return AI.createGroup("YAxisLeft", components);
     }
-    const yTicks = Axis.getTicks(yNumTicks, yAxisLeft);
-    const yLines = generateYAxisLines(xMin - 5, xMax, yMin, yMax, yTicks, yAxisLeft, chart);
-    const yLabels = generateYAxisLabels(xMin - 7, yMin, yMax, "left", yTicks, yAxisLeft, chart);
-    const labelPaddingLeft = 5 + labelPadding(formatNumber(yAxisLeft.max).length, chart.fontSize, 0.5);
-    let yLabel;
+    const axisLabelPosX = xMin - chart.padding.left + chart.fontSize;
+    const yTicks = Axis.getTicks(yNumTicks, axis);
+    if (chart.yGrid) {
+        components.push(generateYAxisLines(xMin - 5, xMax, yMin, yMax, yTicks, axis, chart.yGrid));
+    }
+    components.push(AI.createLine({ x: xMin, y: yMin }, { x: xMin, y: yMax }, (_a = axis.axisColor) !== null && _a !== void 0 ? _a : AI.gray, (_b = axis.thickness) !== null && _b !== void 0 ? _b : 1), generateYAxisLabels(xMin - ((_c = axis.tickLabelDisp) !== null && _c !== void 0 ? _c : 7), yMin, yMax, "left", yTicks, axis, chart));
     switch (chart.labelLayout) {
         case "original":
-            yLabel = generateYAxisLabel(xMin - labelPaddingLeft, yMax + 0.5 * padding, "uniform", "up", yAxisLeft.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, yMax + 0.5 * chart.padding.bottom, "uniform", "up", axis, chart));
             break;
         case "end":
-            yLabel = generateYAxisLabel(xMin - labelPaddingLeft, yMax, "left", "up", yAxisLeft.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, yMax, "left", "up", axis, chart));
             break;
         case "center":
-            yLabel = generateYAxisLabel(xMin - labelPaddingLeft, (yMin + yMax) / 2, "uniform", "up", yAxisLeft.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, (yMin + yMax) / 2, "uniform", "up", axis, chart));
             break;
@@ -220,23 +215,26 @@ default:
     }
-    return AbstractImage.createGroup("YAxisLeft", [yLines, yLabels, yLabel]);
+    return AI.createGroup("YAxisLeft", components);
 }
 exports.generateYAxisLeft = generateYAxisLeft;
-function generateYAxisRight(yNumTicks, yAxisRight, xMax, yMin, yMax, chart) {
-    if (!yAxisRight) {
-        return AbstractImage.createGroup("YAxisRight", []);
+function generateYAxisRight(yNumTicks, axis, xMax, yMin, yMax, chart) {
+    var _a, _b, _c;
+    const components = Array();
+    if (!axis) {
+        return AI.createGroup("YAxisRight", components);
     }
-    const yTicks2 = Axis.getTicks(yNumTicks, yAxisRight);
-    const yLines2 = generateYAxisLines(xMax - 5, xMax + 5, yMin, yMax, yTicks2, yAxisRight, chart);
-    const yLabels2 = generateYAxisLabels(xMax + 7, yMin, yMax, "right", yTicks2, yAxisRight, chart);
-    const labelPaddingRight = 7 + labelPadding(formatNumber(yAxisRight.max).length, chart.fontSize, 1.5);
-    let yLabel2;
+    const axisLabelPosX = xMax + chart.padding.right - chart.fontSize;
+    const yTicks = Axis.getTicks(yNumTicks, axis);
+    if (chart.yGrid) {
+        components.push(generateYAxisLines(xMax - 5, xMax + 5, yMin, yMax, yTicks, axis, chart.yGrid));
+    }
+    components.push(AI.createLine({ x: xMax, y: yMin }, { x: xMax, y: yMax }, (_a = axis.axisColor) !== null && _a !== void 0 ? _a : AI.gray, (_b = axis.thickness) !== null && _b !== void 0 ? _b : 1), generateYAxisLabels(xMax + ((_c = axis.tickLabelDisp) !== null && _c !== void 0 ? _c : 7), yMin, yMax, "right", yTicks, axis, chart));
     switch (chart.labelLayout) {
         case "original":
-            yLabel2 = generateYAxisLabel(xMax + labelPaddingRight, yMax + 0.5 * padding, "uniform", "up", yAxisRight.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, yMax + 0.5 * chart.padding.bottom, "uniform", "up", axis, chart));
             break;
         case "end":
-            yLabel2 = generateYAxisLabel(xMax + labelPaddingRight, yMax, "left", "up", yAxisRight.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, yMax, "left", "up", axis, chart));
             break;
         case "center":
-            yLabel2 = generateYAxisLabel(xMax + labelPaddingRight, (yMin + yMax) / 2, "uniform", "up", yAxisRight.label, chart);
+            components.push(generateYAxisLabel(axisLabelPosX, (yMin + yMax) / 2, "uniform", "up", axis, chart));
             break;
@@ -246,3 +244,3 @@ default:
     }
-    return AbstractImage.createGroup("YAxisRight", [yLines2, yLabels2, yLabel2]);
+    return AI.createGroup("YAxisRight", components);
 }
@@ -261,8 +259,9 @@ exports.generateYAxisRight = generateYAxisRight;
     const stackNeg = generateUnsignedStack(xMin, xMax, yMin, yMax, Object.assign(Object.assign({}, chart), { chartStack: Object.assign(Object.assign({}, chart.chartStack), { points: pointsNeg }) }));
-    return AbstractImage.createGroup("Stacks", [stackPos, stackNeg]);
+    return AI.createGroup("Stacks", [stackPos, stackNeg]);
 }
 exports.generateStack = generateStack;
 function generateUnsignedStack(xMin, xMax, yMin, yMax, chart) {
+    var _a, _b;
     if (chart.chartStack.points.length < 2) {
-        return AbstractImage.createGroup("stack", []);
+        return AI.createGroup("stack", []);
     }
@@ -275,3 +274,3 @@ const xAxis = chart.chartStack.xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom;
             sumY += y;
-            return Axis.transformPoint(AbstractImage.createPoint(stackPoints.x, sumY), xMin, xMax, yMin, yMax, xAxis, yAxis);
+            return Axis.transformPoint(AI.createPoint(stackPoints.x, sumY), xMin, xMax, yMin, yMax, xAxis, yAxis);
         });
@@ -282,3 +281,3 @@ return points;
     const lines = [];
-    for (let i = 0; i < xPoints[0].length; ++i) {
+    for (let i = 0; i < ((_b = (_a = xPoints[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0); ++i) {
         lines[i] = [];
@@ -290,3 +289,3 @@ for (const points of xPoints) {
     const polygons = [];
-    let lastLine = chart.chartStack.points.map((stackPoint) => Axis.transformPoint(AbstractImage.createPoint(stackPoint.x, 0), xMin, xMax, yMin, yMax, xAxis, yAxis));
+    let lastLine = chart.chartStack.points.map((stackPoint) => Axis.transformPoint(AI.createPoint(stackPoint.x, 0), xMin, xMax, yMin, yMax, xAxis, yAxis));
     lines.forEach((line, index) => {
@@ -300,10 +299,11 @@ const config = chart.chartStack.config[index];
         lastLine = line;
-        polygons.push(AbstractImage.createPolygon(points, color, 0, color));
+        polygons.push(AI.createPolygon(points, color, 0, color));
     });
-    return AbstractImage.createGroup("Stack", polygons);
+    return AI.createGroup("Stack", polygons);
 }
 function generateLines(xMin, xMax, yMin, yMax, chart) {
     const lines = chart.chartLines.map((l) => {
+        var _a;
         if (l.points.length < 2) {
-            return AbstractImage.createGroup(l.label, []);
+            return AI.createGroup(l.label, []);
         }
@@ -313,9 +313,8 @@ const xAxis = l.xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom;
         const points = l.points.map((p) => Axis.transformPoint(p, xMin, xMax, yMin, yMax, xAxis, yAxis));
-        const last = points[points.length - 1];
-        return AbstractImage.createGroup(l.label, [
-            AbstractImage.createPolyLine(points, l.color, l.thickness),
-            AbstractImage.createText(last, l.label, chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", "right", "down", 0, AbstractImage.black, false),
+        return AI.createGroup(l.label, [
+            AI.createPolyLine(points, l.color, l.thickness),
+            AI.createText(points.at(-1), l.label, chart.font, (_a = l.fontSize) !== null && _a !== void 0 ? _a : chart.fontSize, AI.black, "normal", 0, "center", "right", "down", 0, AI.black, false),
         ]);
     });
-    return AbstractImage.createGroup("Lines", lines);
+    return AI.createGroup("Lines", lines);
 }
@@ -325,2 +324,3 @@ exports.generateLines = generateLines;
     const points = chart.chartPoints.map((p) => {
+        var _a;
         const xAxis = p.xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom;
@@ -330,8 +330,8 @@ const yAxis = p.yAxis === "right" ? chart.yAxisRight : chart.yAxisLeft;
         const shape = generatePointShape(p, position);
-        return AbstractImage.createGroup(p.label, [
+        return AI.createGroup(p.label, [
             shape,
-            AbstractImage.createText(position, p.label, chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", "right", "down", 0, AbstractImage.black, false),
+            AI.createText(position, p.label, chart.font, (_a = p.fontSize) !== null && _a !== void 0 ? _a : chart.fontSize, AI.black, "normal", 0, "center", "right", "down", 0, AI.black, false),
         ]);
     });
-    return AbstractImage.createGroup("Points", points);
+    return AI.createGroup("Points", points);
 }
@@ -344,50 +344,52 @@ exports.generatePoints = generatePoints;
         const trianglePoints = [
-            AbstractImage.createPoint(position.x, position.y + halfHeight),
-            AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight),
-            AbstractImage.createPoint(position.x + halfWidth, position.y - halfHeight),
+            AI.createPoint(position.x, position.y + halfHeight),
+            AI.createPoint(position.x - halfWidth, position.y - halfHeight),
+            AI.createPoint(position.x + halfWidth, position.y - halfHeight),
         ];
-        return AbstractImage.createPolygon(trianglePoints, AbstractImage.black, 1, p.color);
+        return AI.createPolygon(trianglePoints, AI.black, 1, p.color);
     }
     else if (p.shape === "square") {
-        const topLeft = AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight);
-        const bottomRight = AbstractImage.createPoint(position.x + halfWidth, position.y + halfHeight);
-        return AbstractImage.createRectangle(topLeft, bottomRight, AbstractImage.black, 1, p.color);
+        const topLeft = AI.createPoint(position.x - halfWidth, position.y - halfHeight);
+        const bottomRight = AI.createPoint(position.x + halfWidth, position.y + halfHeight);
+        return AI.createRectangle(topLeft, bottomRight, AI.black, 1, p.color);
     }
     else {
-        const topLeft = AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight);
-        const bottomRight = AbstractImage.createPoint(position.x + halfWidth, position.y + halfHeight);
-        return AbstractImage.createEllipse(topLeft, bottomRight, AbstractImage.black, 1, p.color);
+        const topLeft = AI.createPoint(position.x - halfWidth, position.y - halfHeight);
+        const bottomRight = AI.createPoint(position.x + halfWidth, position.y + halfHeight);
+        return AI.createEllipse(topLeft, bottomRight, AI.black, 1, p.color);
     }
 }
-function generateXAxisGridLines(xMin, xMax, yMin, yMax, xTicks, xAxis, chart) {
+function generateXAxisGridLines(xMin, xMax, yMin, yMax, xTicks, xAxis, grid) {
     const xLines = xTicks.map((l) => {
-        const x = Axis.transformValue(l, xMin, xMax, xAxis);
-        const start = AbstractImage.createPoint(x, yMin);
-        const end = AbstractImage.createPoint(x, yMax);
-        return AbstractImage.createLine(start, end, chart.gridColor, chart.gridThickness);
+        const x = Axis.transformValue(l.value, xMin, xMax, xAxis);
+        const start = AI.createPoint(x, yMin);
+        const end = AI.createPoint(x, yMax);
+        return AI.createLine(start, end, grid.color, grid.thickness);
     });
-    return AbstractImage.createGroup("Lines", xLines);
+    return AI.createGroup("Lines", xLines);
 }
 exports.generateXAxisGridLines = generateXAxisGridLines;
-function generateXAxisLabels(xMin, xMax, y, growVertical, xTicks, xAxis, chart) {
-    const xLabels = xTicks.map((l) => {
-        const position = AbstractImage.createPoint(Axis.transformValue(l, xMin, xMax, xAxis), y);
-        return AbstractImage.createText(position, formatNumber(l), chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", "uniform", growVertical, 0, AbstractImage.black, false);
+function generateXAxisLabels(xMin, xMax, y, growVertical, ticks, axis, chart) {
+    const xLabels = ticks.map((l) => {
+        var _a, _b, _c, _d, _e;
+        const position = AI.createPoint(Axis.transformValue(l.value, xMin, xMax, axis), y);
+        return AI.createText(position, (_a = l.label) !== null && _a !== void 0 ? _a : formatNumber(l.value), chart.font, (_b = axis.tickFontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, "normal", (_d = axis.labelRotation) !== null && _d !== void 0 ? _d : 0, "center", "uniform", growVertical, 0, (_e = axis.labelColor) !== null && _e !== void 0 ? _e : AI.black, false);
     });
-    return AbstractImage.createGroup("Labels", xLabels);
+    return AI.createGroup("Labels", xLabels);
 }
 exports.generateXAxisLabels = generateXAxisLabels;
-function generateXAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, label, chart) {
-    const position = AbstractImage.createPoint(x, y);
-    return AbstractImage.createText(position, label, chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, AbstractImage.black, false);
+function generateXAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, axis, chart) {
+    var _a, _b, _c;
+    const position = AI.createPoint(x, y);
+    return AI.createText(position, axis.label, chart.font, (_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize, (_b = axis.labelColor) !== null && _b !== void 0 ? _b : AI.black, "normal", 0, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, false);
 }
 exports.generateXAxisLabel = generateXAxisLabel;
-function generateYAxisLines(xMin, xMax, yMin, yMax, yTicks, yAxis, chart) {
+function generateYAxisLines(xMin, xMax, yMin, yMax, yTicks, yAxis, grid) {
     const yLines = yTicks.map((l) => {
-        const y = Axis.transformValue(l, yMin, yMax, yAxis);
-        const start = AbstractImage.createPoint(xMin, y);
-        const end = AbstractImage.createPoint(xMax, y);
-        return AbstractImage.createLine(start, end, chart.gridColor, chart.gridThickness);
+        const y = Axis.transformValue(l.value, yMin, yMax, yAxis);
+        const start = AI.createPoint(xMin, y);
+        const end = AI.createPoint(xMax, y);
+        return AI.createLine(start, end, grid.color, grid.thickness);
     });
-    return AbstractImage.createGroup("Lines", yLines);
+    return AI.createGroup("Lines", yLines);
 }
@@ -397,11 +399,13 @@ exports.generateYAxisLines = generateYAxisLines;
     const yLabels = yTicks.map((l) => {
-        const position = AbstractImage.createPoint(x, Axis.transformValue(l, yMin, yMax, yAxis));
-        return AbstractImage.createText(position, formatNumber(l), chart.font, chart.fontSize, AbstractImage.black, "normal", 0, "center", growHorizontal, "uniform", 0, AbstractImage.black, false);
+        var _a, _b, _c, _d, _e;
+        const position = AI.createPoint(x, Axis.transformValue(l.value, yMin, yMax, yAxis));
+        return AI.createText(position, (_a = l.label) !== null && _a !== void 0 ? _a : formatNumber(l.value), chart.font, (_b = yAxis.tickFontSize) !== null && _b !== void 0 ? _b : chart.fontSize, (_c = yAxis.labelColor) !== null && _c !== void 0 ? _c : AI.black, "normal", (_d = yAxis.labelRotation) !== null && _d !== void 0 ? _d : 0, "center", growHorizontal, "uniform", 0, (_e = yAxis.labelColor) !== null && _e !== void 0 ? _e : AI.black, false);
     });
-    return AbstractImage.createGroup("Labels", yLabels);
+    return AI.createGroup("Labels", yLabels);
 }
 exports.generateYAxisLabels = generateYAxisLabels;
-function generateYAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, label, chart) {
-    const position = AbstractImage.createPoint(x, y);
-    return AbstractImage.createText(position, label, chart.font, chart.fontSize, AbstractImage.black, "normal", -90, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, AbstractImage.black, false);
+function generateYAxisLabel(x, y, horizontalGrowthDirection, verticalGrowthDirection, axis, chart) {
+    var _a, _b, _c;
+    const position = AI.createPoint(x, y);
+    return AI.createText(position, axis.label, chart.font, (_a = axis.axisFontSize) !== null && _a !== void 0 ? _a : chart.fontSize, (_b = axis.labelColor) !== null && _b !== void 0 ? _b : AI.black, "normal", -90, "center", horizontalGrowthDirection, verticalGrowthDirection, 0, (_c = axis.labelColor) !== null && _c !== void 0 ? _c : AI.black, false);
 }
@@ -408,0 +412,0 @@ exports.generateYAxisLabel = generateYAxisLabel;

lib/index.js

 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
@@ -6,0 +10,0 @@ if (k2 === undefined) k2 = k;

package.json

 {
   "name": "abstract-chart",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "Drawing charts using multiple unit of measure axes as coordinate system",
@@ -18,6 +18,6 @@ "repository": "https://github.com/dividab/abstract-visuals/tree/master/packages/abstract-chart",
   "dependencies": {
-    "abstract-image": "^7.0.0",
+    "abstract-image": "^7.0.1",
     "ts-exhaustive-check": "^1.0.0"
   },
-  "gitHead": "0e2c5a08ebbf566b80332c545d09526d1d070f3d"
+  "gitHead": "0171adcd8cf6d50e0a2f00a9bb07e53c427f6fd4"
 }

src/axis.ts

@@ -1,37 +0,65 @@
-import * as AbstractImage from "abstract-image";
+import * as AI from "abstract-image";
+import { exhaustiveCheck } from "ts-exhaustive-check";
 
-export type Axis = LinearAxis | LogarithmicAxis;
+export type Axis = LinearAxis | LogarithmicAxis | DiscreteAxis;
 
-export interface LinearAxis {
-  readonly type: "linear";
-  readonly min: number;
-  readonly max: number;
+export type AxisBase = {
   readonly label: string;
+  readonly labelRotation?: number;
+  readonly tickLabelDisp?: number;
+  readonly labelColor?: AI.Color;
+  readonly tickLabelColor?: AI.Color;
+  readonly thickness?: number;
+  readonly axisColor?: AI.Color;
+  readonly tickFontSize?: number;
+  readonly axisFontSize?: number;
+};
+
+export type LinearAxis = AxisBase & { readonly type: "linear"; readonly min: number; readonly max: number };
+
+export function createLinearAxis(
+  min: number,
+  max: number,
+  label: string,
+  labelColor?: AI.Color,
+  labelRotation?: number,
+  tickLabelDisp?: number,
+  thickness?: number,
+  axisColor?: AI.Color
+): LinearAxis {
+  return { type: "linear", min, max, label, labelColor, labelRotation, tickLabelDisp, thickness, axisColor };
 }
 
-export function createLinearAxis(min: number, max: number, label: string): LinearAxis {
-  return {
-    type: "linear",
-    min: min,
-    max: max,
-    label: label,
-  };
+export type LogarithmicAxis = AxisBase & { readonly type: "logarithmic"; readonly min: number; readonly max: number };
+
+export function createLogarithmicAxis(
+  min: number,
+  max: number,
+  label: string,
+  labelColor?: AI.Color,
+  labelRotation?: number,
+  tickLabelDisp?: number,
+  thickness?: number,
+  axisColor?: AI.Color
+): LogarithmicAxis {
+  return { type: "logarithmic", min, max, labelColor, label, labelRotation, tickLabelDisp, thickness, axisColor };
 }
 
-//dummy
+export type DiscreteAxis = AxisBase & { readonly type: "discrete"; readonly points: ReadonlyArray<DiscreteAxisPoint> };
 
-export interface LogarithmicAxis {
-  readonly type: "logarithmic";
-  readonly min: number;
-  readonly max: number;
-  readonly label: string;
+export interface DiscreteAxisPoint {
+  readonly value: number;
+  readonly label?: string;
 }
 
-export function createLogarithmicAxis(min: number, max: number, label: string): LogarithmicAxis {
-  return {
-    type: "logarithmic",
-    min: min,
-    max: max,
-    label: label,
-  };
+export function createDiscreteAxis(
+  points: ReadonlyArray<DiscreteAxisPoint>,
+  label: string,
+  labelColor?: AI.Color,
+  labelRotation?: number,
+  tickLabelDisp?: number,
+  thickness?: number,
+  axisColor?: AI.Color
+): DiscreteAxis {
+  return { type: "discrete", points, labelColor, label, labelRotation, tickLabelDisp, thickness, axisColor };
 }
@@ -42,3 +70,3 @@
 
-export function getTicks(desiredTicks: number, axis: Axis): Array<number> {
+export function getTicks(desiredTicks: number, axis: Axis): ReadonlyArray<DiscreteAxisPoint> {
   switch (axis.type) {
@@ -49,3 +77,6 @@ case "linear":
       return getLogarithmicTicks(desiredTicks, axis.min, axis.max);
+    case "discrete":
+      return axis.points;
     default:
+      exhaustiveCheck(axis);
       return [];
@@ -61,3 +92,3 @@ }
 
-export function getLinearTicks(desiredTicks: number, min: number, max: number): Array<number> {
+export function getLinearTicks(desiredTicks: number, min: number, max: number): ReadonlyArray<DiscreteAxisPoint> {
   let best: Alternative | undefined;
@@ -73,7 +104,3 @@ for (const power of linearPowers) {
       if (!best || Math.abs(best.ticks - desiredTicks) > Math.abs(ticks - desiredTicks)) {
-        best = {
-          min: cMin * step,
-          step: step,
-          ticks: ticks,
-        };
+        best = { min: cMin * step, step: step, ticks: ticks };
       }
@@ -83,7 +110,3 @@ }
 
-  if (!best) {
-    return [];
-  }
-  const b = best;
-  return range(0, b.ticks).map((l) => b.min + b.step * l);
+  return best ? range(0, best.ticks).map((l) => ({ value: best.min + best.step * l })) : [];
 }
@@ -100,3 +123,3 @@
 
-export function getLogarithmicTicks(desiredTicks: number, min: number, max: number): Array<number> {
+export function getLogarithmicTicks(desiredTicks: number, min: number, max: number): ReadonlyArray<DiscreteAxisPoint> {
   const minPow = Math.floor(Math.log10(min)) - 1;
@@ -106,17 +129,16 @@ const maxPow = Math.ceil(Math.log10(max)) + 1;
   const alternatives = logarithmicAlternatives.map((stepAlt) => {
-    const altLines = powers.reduce((lines: Array<number>, power: number) => {
+    const altLines = powers.reduce((lines: Array<DiscreteAxisPoint>, power: number) => {
       const base = Math.pow(10, power);
-      const powerLines = stepAlt.map((i) => i * base);
+      const powerLines = stepAlt.map((i) => ({ value: i * base }));
       return lines.concat(powerLines);
     }, []);
-    return altLines.filter((l) => l >= min && l <= max);
+    return altLines.filter((l) => l.value >= min && l.value <= max);
   });
-  const bestLines = alternatives.reduce((prev, alt) =>
+  return alternatives.reduce((prev, alt) =>
     Math.abs(alt.length - desiredTicks) < Math.abs(prev.length - desiredTicks) ? alt : prev
   );
-  return bestLines;
 }
 
 export function transformPoint(
-  point: AbstractImage.Point,
+  point: AI.Point,
   xMin: number,
@@ -128,6 +150,6 @@ xMax: number,
   yAxis: Axis | undefined
-): AbstractImage.Point {
+): AI.Point {
   const x = transformValue(point.x, xMin, xMax, xAxis);
   const y = transformValue(point.y, yMin, yMax, yAxis);
-  return AbstractImage.createPoint(x, y);
+  return AI.createPoint(x, y);
 }
@@ -142,6 +164,9 @@
     case "linear":
-      return min + range * linearTransform(value, axis.min, axis.max);
+      return min + range * linearTransform(value, axisMin(axis), axisMax(axis));
     case "logarithmic":
-      return min + range * logarithmicTransform(value, axis.min, axis.max);
+      return min + range * logarithmicTransform(value, axisMin(axis), axisMax(axis));
+    case "discrete":
+      return min + range * linearTransform(value, axisMin(axis), axisMax(axis));
     default:
+      exhaustiveCheck(axis);
       return 0;
@@ -158,6 +183,9 @@ }
     case "linear":
-      return inverseLinearTransform((value - min) / range, axis.min, axis.max);
+      return inverseLinearTransform((value - min) / range, axisMin(axis), axisMax(axis));
     case "logarithmic":
-      return inverseLogarithmicTransform((value - min) / range, axis.min, axis.max);
+      return inverseLogarithmicTransform((value - min) / range, axisMin(axis), axisMax(axis));
+    case "discrete":
+      return inverseLinearTransform((value - min) / range, axisMin(axis), axisMax(axis));
     default:
+      exhaustiveCheck(axis);
       return 0;
@@ -167,2 +195,28 @@ }
 
+export function axisMin(axis: Axis): number {
+  switch (axis.type) {
+    case "linear":
+    case "logarithmic":
+      return axis.min;
+    case "discrete":
+      return axis.points[0]?.value ?? 0;
+    default:
+      exhaustiveCheck(axis);
+      return 0;
+  }
+}
+
+export function axisMax(axis: Axis): number {
+  switch (axis.type) {
+    case "linear":
+    case "logarithmic":
+      return axis.max;
+    case "discrete":
+      return axis.points.at(-1)?.value ?? 0;
+    default:
+      exhaustiveCheck(axis);
+      return 0;
+  }
+}
+
 export function linearTransform(value: number, min: number, max: number): number {
@@ -169,0 +223,0 @@ return (value - min) / (max - min);

src/chart.ts

@@ -1,2 +0,2 @@
-import * as AbstractImage from "abstract-image";
+import * as AI from "abstract-image";
 import * as Axis from "./axis";
@@ -21,49 +21,43 @@ import { exhaustiveCheck } from "ts-exhaustive-check";
   readonly yAxisRight: Axis.Axis | undefined;
-  readonly backgroundColor: AbstractImage.Color;
-  readonly gridColor: AbstractImage.Color;
-  readonly gridThickness: number;
+  readonly backgroundColor: AI.Color;
+  readonly xGrid: ChartGrid;
+  readonly yGrid: ChartGrid;
   readonly font: string;
   readonly fontSize: number;
   readonly labelLayout: LabelLayout;
+  readonly padding: Padding;
 }
 
+export type ChartGrid = { readonly color: AI.Color; readonly thickness: number };
+
 export type ChartProps = Partial<Chart>;
 
 export function createChart(props: ChartProps): Chart {
-  const {
-    width = 600,
-    height = 400,
-    chartPoints = [],
-    chartLines = [],
-    chartStack = createChartStack({}),
-    xAxisBottom = Axis.createLinearAxis(0, 100, ""),
-    xAxisTop = undefined,
-    yAxisLeft = Axis.createLinearAxis(0, 100, ""),
-    yAxisRight = undefined,
-    backgroundColor = AbstractImage.white,
-    gridColor = AbstractImage.gray,
-    gridThickness = 1,
-    font = "Arial",
-    fontSize = 12,
-    labelLayout = "original",
-  } = props || {};
   return {
-    width,
-    height,
-    chartPoints,
-    chartLines,
-    chartStack,
-    xAxisBottom,
-    xAxisTop,
-    yAxisLeft,
-    yAxisRight,
-    backgroundColor,
-    gridColor,
-    gridThickness,
-    font,
-    fontSize,
-    labelLayout,
+    width: props.width ?? 600,
+    height: props.height ?? 600,
+    chartPoints: props.chartPoints ?? [],
+    chartLines: props.chartLines ?? [],
+    chartStack: props.chartStack ?? createChartStack({}),
+    xAxisBottom: props.xAxisBottom ?? Axis.createLinearAxis(0, 100, ""),
+    xAxisTop: props.xAxisTop ?? undefined,
+    yAxisLeft: props.yAxisLeft ?? Axis.createLinearAxis(0, 100, ""),
+    yAxisRight: props.yAxisRight ?? undefined,
+    backgroundColor: props.backgroundColor ?? AI.white,
+    font: props.font ?? "Arial",
+    fontSize: props.fontSize ?? 12,
+    labelLayout: props.labelLayout ?? "original",
+    padding: {
+      top: props.padding?.top ?? (props.xAxisTop !== undefined ? 45 : 10),
+      right: props.padding?.right ?? (props.yAxisRight !== undefined ? 45 : 10),
+      bottom: props.padding?.bottom ?? (props.xAxisBottom === undefined ? 10 : 45),
+      left: props.padding?.left ?? (!props.yAxisLeft === undefined ? 10 : 45),
+    },
+    xGrid: { color: props.xGrid?.color ?? AI.gray, thickness: props.xGrid?.thickness ?? 1 },
+    yGrid: { color: props.yGrid?.color ?? AI.gray, thickness: props.yGrid?.thickness ?? 1 },
   };
 }
 
+type Padding = { readonly top: number; readonly right: number; readonly bottom: number; readonly left: number };
+
 export type XAxis = "bottom" | "top";
@@ -76,8 +70,9 @@ export type YAxis = "left" | "right";
   readonly shape: ChartPointShape;
-  readonly position: AbstractImage.Point;
-  readonly color: AbstractImage.Color;
-  readonly size: AbstractImage.Size;
+  readonly position: AI.Point;
+  readonly color: AI.Color;
+  readonly size: AI.Size;
   readonly label: string;
   readonly xAxis: XAxis;
   readonly yAxis: YAxis;
+  readonly fontSize?: number;
 }
@@ -90,5 +85,5 @@
     shape = "circle",
-    position = AbstractImage.createPoint(0, 0),
-    color = AbstractImage.black,
-    size = AbstractImage.createSize(6, 6),
+    position = AI.createPoint(0, 0),
+    color = AI.black,
+    size = AI.createSize(6, 6),
     label = "",
@@ -98,16 +93,8 @@ xAxis = "bottom",
   } = props || {};
-  return {
-    shape,
-    position,
-    color,
-    size,
-    label,
-    xAxis,
-    yAxis,
-  };
+  return { shape, position, color, size, label, xAxis, yAxis };
 }
 
 export interface ChartLine {
-  readonly points: Array<AbstractImage.Point>;
-  readonly color: AbstractImage.Color;
+  readonly points: Array<AI.Point>;
+  readonly color: AI.Color;
   readonly thickness: number;
@@ -117,2 +104,3 @@ readonly label: string;
   readonly yAxis: YAxis;
+  readonly fontSize?: number;
 }
@@ -123,22 +111,8 @@
 export function createChartLine(props: ChartLineProps): ChartLine {
-  const {
-    points = [],
-    color = AbstractImage.black,
-    thickness = 1,
-    label = "",
-    xAxis = "bottom",
-    yAxis = "left",
-  } = props || {};
-  return {
-    points,
-    color,
-    thickness,
-    label,
-    xAxis,
-    yAxis,
-  };
+  const { points = [], color = AI.black, thickness = 1, label = "", xAxis = "bottom", yAxis = "left" } = props || {};
+  return { points, color, thickness, label, xAxis, yAxis };
 }
 
 export interface ChartStackConfig {
-  readonly color: AbstractImage.Color;
+  readonly color: AI.Color;
   readonly label: string;
@@ -150,7 +124,4 @@ }
 export function createChartStackConfig(props: ChartStackConfigProps): ChartStackConfig {
-  const { color = AbstractImage.black, label = "" } = props || {};
-  return {
-    color,
-    label,
-  };
+  const { color = AI.black, label = "" } = props || {};
+  return { color, label };
 }
@@ -174,22 +145,16 @@
   const { points = [], xAxis = "bottom", yAxis = "left", config = [createChartStackConfig({})] } = props || {};
-  return {
-    points,
-    xAxis,
-    yAxis,
-    config,
-  };
+  return { points, xAxis, yAxis, config };
 }
 
-const padding = 80;
-
 export function inverseTransformPoint(
-  point: AbstractImage.Point,
+  point: AI.Point,
   chart: Chart,
   xAxis: XAxis,
-  yAxis: YAxis
-): AbstractImage.Point | undefined {
-  const xMin = padding;
-  const xMax = chart.width - padding;
-  const yMin = chart.height - 0.5 * padding;
-  const yMax = 0.5 * padding;
+  yAxis: YAxis,
+  padding: Padding
+): AI.Point | undefined {
+  const xMin = padding.left;
+  const xMax = chart.width - padding.right;
+  const yMin = chart.height - padding.bottom;
+  const yMax = padding.top;
   const x = Axis.inverseTransformValue(point.x, xMin, xMax, xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom);
@@ -200,15 +165,15 @@ const y = Axis.inverseTransformValue(point.y, yMin, yMax, yAxis === "right" ? chart.yAxisRight : chart.yAxisLeft);
   }
-  return AbstractImage.createPoint(x, y);
+  return AI.createPoint(x, y);
 }
 
-export function renderChart(chart: Chart): AbstractImage.AbstractImage {
-  const { width, height, xAxisBottom, xAxisTop, yAxisLeft, yAxisRight } = chart;
+export function renderChart(chart: Chart): AI.AbstractImage {
+  const { width, height, xAxisBottom, xAxisTop, yAxisLeft, yAxisRight, padding } = chart;
 
-  const gridWidth = width - 2 * padding;
-  const gridHeight = height - padding;
+  const gridWidth = width - padding.left - padding.right;
+  const gridHeight = height - padding.bottom - padding.top;
 
-  const xMin = padding;
-  const xMax = width - padding;
-  const yMin = height - 0.5 * padding;
-  const yMax = 0.5 * padding;
+  const xMin = padding.left;
+  const xMax = width - padding.right;
+  const yMin = height - padding.bottom;
+  const yMax = padding.top;
 
@@ -239,21 +204,13 @@ const renderedBackground = generateBackground(xMin, xMax, yMin, yMax, chart);
   ];
-  const topLeft = AbstractImage.createPoint(0, 0);
-  const size = AbstractImage.createSize(width, height);
-  return AbstractImage.createAbstractImage(topLeft, size, AbstractImage.white, components);
+  const topLeft = AI.createPoint(0, 0);
+  const size = AI.createSize(width, height);
+  return AI.createAbstractImage(topLeft, size, AI.white, components);
 }
 
-export function generateBackground(
-  xMin: number,
-  xMax: number,
-  yMin: number,
-  yMax: number,
-  chart: Chart
-): AbstractImage.Component {
-  const topLeft = AbstractImage.createPoint(xMin, yMax);
-  const bottomRight = AbstractImage.createPoint(xMax, yMin);
-  return AbstractImage.createRectangle(
-    topLeft,
-    bottomRight,
-    chart.gridColor,
-    chart.gridThickness,
+export function generateBackground(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component {
+  return AI.createRectangle(
+    AI.createPoint(xMin, yMax),
+    AI.createPoint(xMax, yMin),
+    AI.transparent,
+    0,
     chart.backgroundColor
@@ -265,3 +222,3 @@ );
   xNumTicks: number,
-  xAxisBottom: Axis.Axis | undefined,
+  axis: Axis.Axis | undefined,
   xMin: number,
@@ -272,24 +229,36 @@ xMax: number,
   chart: Chart
-): AbstractImage.Component {
-  if (!xAxisBottom) {
-    return AbstractImage.createGroup("XAxisBottom", []);
+): AI.Component {
+  const components = Array<AI.Component>();
+  if (!axis) {
+    return AI.createGroup("XAxisBottom", components);
   }
-  const xTicks = Axis.getTicks(xNumTicks, xAxisBottom);
-  const xLines = generateXAxisGridLines(xMin, xMax, yMin + 10, yMax, xTicks, xAxisBottom, chart);
-  const xLabels = generateXAxisLabels(xMin, xMax, yMin + 10, "down", xTicks, xAxisBottom, chart);
+  const axisLabelPosY = yMin + chart.padding.bottom - chart.fontSize;
+  const xTicks = Axis.getTicks(xNumTicks, axis);
+  if (chart.xGrid) {
+    components.push(generateXAxisGridLines(xMin, xMax, yMin + 10, yMax, xTicks, axis, chart.xGrid));
+  }
+  components.push(
+    AI.createLine({ x: xMin, y: yMin }, { x: xMax, y: yMin }, axis.axisColor ?? AI.gray, axis.thickness ?? 1),
+    generateXAxisLabels(xMin, xMax, yMin + (axis.tickLabelDisp ?? 10), "down", xTicks, axis, chart)
+  );
 
-  let xLabel: AbstractImage.Component;
   switch (chart.labelLayout) {
     case "original":
-      xLabel = generateXAxisLabel(xMax + 0.5 * padding, yMin + 10, "uniform", "down", xAxisBottom.label, chart);
+      components.push(
+        generateXAxisLabel(
+          xMax + chart.padding.right,
+          yMin + (axis.tickLabelDisp ?? 10),
+          "uniform",
+          "down",
+          axis,
+          chart
+        )
+      );
       break;
-
     case "end":
-      xLabel = generateXAxisLabel(xMax, yMin + 25, "left", "down", xAxisBottom.label, chart);
+      components.push(generateXAxisLabel(xMax, axisLabelPosY, "left", "down", axis, chart));
       break;
-
     case "center":
-      xLabel = generateXAxisLabel((xMin + xMax) / 2, yMin + 25, "uniform", "down", xAxisBottom.label, chart);
+      components.push(generateXAxisLabel((xMin + xMax) / 2, axisLabelPosY, "uniform", "down", axis, chart));
       break;
-
     default:
@@ -299,3 +268,3 @@ return exhaustiveCheck(chart.labelLayout);
 
-  return AbstractImage.createGroup("XAxisBottom", [xLines, xLabels, xLabel]);
+  return AI.createGroup("XAxisBottom", components);
 }
@@ -305,3 +274,3 @@
   xNumTicks: number,
-  xAxisTop: Axis.Axis | undefined,
+  axis: Axis.Axis | undefined,
   xMin: number,
@@ -311,24 +280,36 @@ xMax: number,
   chart: Chart
-): AbstractImage.Component {
-  if (!xAxisTop) {
-    return AbstractImage.createGroup("XAxisTop", []);
+): AI.Component {
+  const components = Array<AI.Component>();
+  if (!axis) {
+    return AI.createGroup("XAxisTop", components);
   }
-  const xTicks2 = Axis.getTicks(xNumTicks, xAxisTop);
-  const xLines2 = generateXAxisGridLines(xMin, xMax, yMax - 10, yMax, xTicks2, xAxisTop, chart);
-  const xLabels2 = generateXAxisLabels(xMin, xMax, yMax - 13, "up", xTicks2, xAxisTop, chart);
+  const axisLabelPosY = yMax - chart.padding.top + chart.fontSize;
+  const xTicks = Axis.getTicks(xNumTicks, axis);
+  if (chart.xGrid) {
+    components.push(generateXAxisGridLines(xMin, xMax, yMax - 10, yMax, xTicks, axis, chart.xGrid));
+  }
+  components.push(
+    AI.createLine({ x: xMin, y: yMax }, { x: xMax, y: yMax }, axis.axisColor ?? AI.gray, axis.thickness ?? 1),
+    generateXAxisLabels(xMin, xMax, yMax - (axis.tickLabelDisp ?? 13), "up", xTicks, axis, chart)
+  );
 
-  let xLabel2: AbstractImage.Component;
   switch (chart.labelLayout) {
     case "original":
-      xLabel2 = generateXAxisLabel(xMax + 0.5 * padding, yMax - 13, "uniform", "up", xAxisTop.label, chart);
+      components.push(
+        generateXAxisLabel(
+          xMax + 0.5 * chart.padding.right,
+          yMax - (axis.tickLabelDisp ?? 13),
+          "uniform",
+          "up",
+          axis,
+          chart
+        )
+      );
       break;
-
     case "end":
-      xLabel2 = generateXAxisLabel(xMax, yMax - 30, "left", "up", xAxisTop.label, chart);
+      components.push(generateXAxisLabel(xMax, axisLabelPosY, "left", "up", axis, chart));
       break;
-
     case "center":
-      xLabel2 = generateXAxisLabel((xMin + xMax) / 2, yMax - 30, "uniform", "up", xAxisTop.label, chart);
+      components.push(generateXAxisLabel((xMin + xMax) / 2, axisLabelPosY, "uniform", "up", axis, chart));
       break;
-
     default:
@@ -338,3 +319,3 @@ return exhaustiveCheck(chart.labelLayout);
 
-  return AbstractImage.createGroup("XAxisTop", [xLines2, xLabels2, xLabel2]);
+  return AI.createGroup("XAxisTop", components);
 }
@@ -344,3 +325,3 @@
   yNumTicks: number,
-  yAxisLeft: Axis.Axis | undefined,
+  axis: Axis.Axis | undefined,
   xMin: number,
@@ -351,33 +332,30 @@ xMax: number,
   chart: Chart
-): AbstractImage.Component {
-  if (!yAxisLeft) {
-    return AbstractImage.createGroup("YAxisLeft", []);
+): AI.Component {
+  const components = Array<AI.Component>();
+  if (!axis) {
+    return AI.createGroup("YAxisLeft", components);
   }
-  const yTicks = Axis.getTicks(yNumTicks, yAxisLeft);
-  const yLines = generateYAxisLines(xMin - 5, xMax, yMin, yMax, yTicks, yAxisLeft, chart);
-  const yLabels = generateYAxisLabels(xMin - 7, yMin, yMax, "left", yTicks, yAxisLeft, chart);
+  const axisLabelPosX = xMin - chart.padding.left + chart.fontSize;
 
-  const labelPaddingLeft = 5 + labelPadding(formatNumber(yAxisLeft.max).length, chart.fontSize, 0.5);
+  const yTicks = Axis.getTicks(yNumTicks, axis);
+  if (chart.yGrid) {
+    components.push(generateYAxisLines(xMin - 5, xMax, yMin, yMax, yTicks, axis, chart.yGrid));
+  }
+  components.push(
+    AI.createLine({ x: xMin, y: yMin }, { x: xMin, y: yMax }, axis.axisColor ?? AI.gray, axis.thickness ?? 1),
+    generateYAxisLabels(xMin - (axis.tickLabelDisp ?? 7), yMin, yMax, "left", yTicks, axis, chart)
+  );
 
-  let yLabel: AbstractImage.Component;
   switch (chart.labelLayout) {
     case "original":
-      yLabel = generateYAxisLabel(
-        xMin - labelPaddingLeft,
-        yMax + 0.5 * padding,
-        "uniform",
-        "up",
-        yAxisLeft.label,
-        chart
+      components.push(
+        generateYAxisLabel(axisLabelPosX, yMax + 0.5 * chart.padding.bottom, "uniform", "up", axis, chart)
       );
       break;
-
     case "end":
-      yLabel = generateYAxisLabel(xMin - labelPaddingLeft, yMax, "left", "up", yAxisLeft.label, chart);
+      components.push(generateYAxisLabel(axisLabelPosX, yMax, "left", "up", axis, chart));
       break;
-
     case "center":
-      yLabel = generateYAxisLabel(xMin - labelPaddingLeft, (yMin + yMax) / 2, "uniform", "up", yAxisLeft.label, chart);
+      components.push(generateYAxisLabel(axisLabelPosX, (yMin + yMax) / 2, "uniform", "up", axis, chart));
       break;
-
     default:
@@ -387,3 +365,3 @@ return exhaustiveCheck(chart.labelLayout);
 
-  return AbstractImage.createGroup("YAxisLeft", [yLines, yLabels, yLabel]);
+  return AI.createGroup("YAxisLeft", components);
 }
@@ -393,3 +371,3 @@
   yNumTicks: number,
-  yAxisRight: Axis.Axis | undefined,
+  axis: Axis.Axis | undefined,
   xMax: number,
@@ -399,40 +377,30 @@ yMin: number,
   chart: Chart
-): AbstractImage.Component {
-  if (!yAxisRight) {
-    return AbstractImage.createGroup("YAxisRight", []);
+): AI.Component {
+  const components = Array<AI.Component>();
+  if (!axis) {
+    return AI.createGroup("YAxisRight", components);
   }
-  const yTicks2 = Axis.getTicks(yNumTicks, yAxisRight);
-  const yLines2 = generateYAxisLines(xMax - 5, xMax + 5, yMin, yMax, yTicks2, yAxisRight, chart);
-  const yLabels2 = generateYAxisLabels(xMax + 7, yMin, yMax, "right", yTicks2, yAxisRight, chart);
+  const axisLabelPosX = xMax + chart.padding.right - chart.fontSize;
 
-  const labelPaddingRight = 7 + labelPadding(formatNumber(yAxisRight.max).length, chart.fontSize, 1.5);
+  const yTicks = Axis.getTicks(yNumTicks, axis);
+  if (chart.yGrid) {
+    components.push(generateYAxisLines(xMax - 5, xMax + 5, yMin, yMax, yTicks, axis, chart.yGrid));
+  }
+  components.push(
+    AI.createLine({ x: xMax, y: yMin }, { x: xMax, y: yMax }, axis.axisColor ?? AI.gray, axis.thickness ?? 1),
+    generateYAxisLabels(xMax + (axis.tickLabelDisp ?? 7), yMin, yMax, "right", yTicks, axis, chart)
+  );
 
-  let yLabel2: AbstractImage.Component;
   switch (chart.labelLayout) {
     case "original":
-      yLabel2 = generateYAxisLabel(
-        xMax + labelPaddingRight,
-        yMax + 0.5 * padding,
-        "uniform",
-        "up",
-        yAxisRight.label,
-        chart
+      components.push(
+        generateYAxisLabel(axisLabelPosX, yMax + 0.5 * chart.padding.bottom, "uniform", "up", axis, chart)
       );
       break;
-
     case "end":
-      yLabel2 = generateYAxisLabel(xMax + labelPaddingRight, yMax, "left", "up", yAxisRight.label, chart);
+      components.push(generateYAxisLabel(axisLabelPosX, yMax, "left", "up", axis, chart));
       break;
-
     case "center":
-      yLabel2 = generateYAxisLabel(
-        xMax + labelPaddingRight,
-        (yMin + yMax) / 2,
-        "uniform",
-        "up",
-        yAxisRight.label,
-        chart
-      );
+      components.push(generateYAxisLabel(axisLabelPosX, (yMin + yMax) / 2, "uniform", "up", axis, chart));
       break;
-
     default:
@@ -442,12 +410,6 @@ return exhaustiveCheck(chart.labelLayout);
 
-  return AbstractImage.createGroup("YAxisRight", [yLines2, yLabels2, yLabel2]);
+  return AI.createGroup("YAxisRight", components);
 }
 
-export function generateStack(
-  xMin: number,
-  xMax: number,
-  yMin: number,
-  yMax: number,
-  chart: Chart
-): AbstractImage.Component {
+export function generateStack(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component {
   const pointsPos = chart.chartStack.points.map((stackPoint) => ({
@@ -473,14 +435,8 @@ x: stackPoint.x,
 
-  return AbstractImage.createGroup("Stacks", [stackPos, stackNeg]);
+  return AI.createGroup("Stacks", [stackPos, stackNeg]);
 }
 
-function generateUnsignedStack(
-  xMin: number,
-  xMax: number,
-  yMin: number,
-  yMax: number,
-  chart: Chart
-): AbstractImage.Component {
+function generateUnsignedStack(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component {
   if (chart.chartStack.points.length < 2) {
-    return AbstractImage.createGroup("stack", []);
+    return AI.createGroup("stack", []);
   }
@@ -495,3 +451,3 @@
       sumY += y;
-      return Axis.transformPoint(AbstractImage.createPoint(stackPoints.x, sumY), xMin, xMax, yMin, yMax, xAxis, yAxis);
+      return Axis.transformPoint(AI.createPoint(stackPoints.x, sumY), xMin, xMax, yMin, yMax, xAxis, yAxis);
     });
@@ -502,13 +458,13 @@ return points;
   // Transpose the xPoints data to lines.
-  const lines: Array<Array<AbstractImage.Point>> = [];
-  for (let i = 0; i < xPoints[0].length; ++i) {
+  const lines: Array<Array<AI.Point>> = [];
+  for (let i = 0; i < (xPoints[0]?.length ?? 0); ++i) {
     lines[i] = [];
     for (const points of xPoints) {
-      lines[i].push(points[i]);
+      lines[i]!.push(points[i]!);
     }
   }
 
-  const polygons: Array<AbstractImage.Polygon> = [];
+  const polygons: Array<AI.Polygon> = [];
   let lastLine = chart.chartStack.points.map((stackPoint) =>
-    Axis.transformPoint(AbstractImage.createPoint(stackPoint.x, 0), xMin, xMax, yMin, yMax, xAxis, yAxis)
+    Axis.transformPoint(AI.createPoint(stackPoint.x, 0), xMin, xMax, yMin, yMax, xAxis, yAxis)
   );
@@ -523,18 +479,12 @@ lines.forEach((line, index) => {
     lastLine = line;
-    polygons.push(AbstractImage.createPolygon(points, color, 0, color));
+    polygons.push(AI.createPolygon(points, color, 0, color));
   });
 
-  return AbstractImage.createGroup("Stack", polygons);
+  return AI.createGroup("Stack", polygons);
 }
 
-export function generateLines(
-  xMin: number,
-  xMax: number,
-  yMin: number,
-  yMax: number,
-  chart: Chart
-): AbstractImage.Component {
+export function generateLines(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component {
   const lines = chart.chartLines.map((l: ChartLine) => {
     if (l.points.length < 2) {
-      return AbstractImage.createGroup(l.label, []);
+      return AI.createGroup(l.label, []);
     }
@@ -544,11 +494,10 @@ const xAxis = l.xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom;
     const points = l.points.map((p) => Axis.transformPoint(p, xMin, xMax, yMin, yMax, xAxis, yAxis));
-    const last = points[points.length - 1];
-    return AbstractImage.createGroup(l.label, [
-      AbstractImage.createPolyLine(points, l.color, l.thickness),
-      AbstractImage.createText(
-        last,
+    return AI.createGroup(l.label, [
+      AI.createPolyLine(points, l.color, l.thickness),
+      AI.createText(
+        points.at(-1)!,
         l.label,
         chart.font,
-        chart.fontSize,
-        AbstractImage.black,
+        l.fontSize ?? chart.fontSize,
+        AI.black,
         "normal",
@@ -560,3 +509,3 @@ 0,
         0,
-        AbstractImage.black,
+        AI.black,
         false
@@ -566,12 +515,6 @@ ),
   });
-  return AbstractImage.createGroup("Lines", lines);
+  return AI.createGroup("Lines", lines);
 }
 
-export function generatePoints(
-  xMin: number,
-  xMax: number,
-  yMin: number,
-  yMax: number,
-  chart: Chart
-): AbstractImage.Component {
+export function generatePoints(xMin: number, xMax: number, yMin: number, yMax: number, chart: Chart): AI.Component {
   const points = chart.chartPoints.map((p) => {
@@ -582,10 +525,10 @@ const xAxis = p.xAxis === "top" ? chart.xAxisTop : chart.xAxisBottom;
     const shape = generatePointShape(p, position);
-    return AbstractImage.createGroup(p.label, [
+    return AI.createGroup(p.label, [
       shape,
-      AbstractImage.createText(
+      AI.createText(
         position,
         p.label,
         chart.font,
-        chart.fontSize,
-        AbstractImage.black,
+        p.fontSize ?? chart.fontSize,
+        AI.black,
         "normal",
@@ -597,3 +540,3 @@ 0,
         0,
-        AbstractImage.black,
+        AI.black,
         false
@@ -603,6 +546,6 @@ ),
   });
-  return AbstractImage.createGroup("Points", points);
+  return AI.createGroup("Points", points);
 }
 
-function generatePointShape(p: ChartPoint, position: AbstractImage.Point): AbstractImage.Component {
+function generatePointShape(p: ChartPoint, position: AI.Point): AI.Component {
   const halfWidth = p.size.width * 0.5;
@@ -612,15 +555,15 @@ const halfHeight = p.size.height * 0.5;
     const trianglePoints = [
-      AbstractImage.createPoint(position.x, position.y + halfHeight),
-      AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight),
-      AbstractImage.createPoint(position.x + halfWidth, position.y - halfHeight),
+      AI.createPoint(position.x, position.y + halfHeight),
+      AI.createPoint(position.x - halfWidth, position.y - halfHeight),
+      AI.createPoint(position.x + halfWidth, position.y - halfHeight),
     ];
-    return AbstractImage.createPolygon(trianglePoints, AbstractImage.black, 1, p.color);
+    return AI.createPolygon(trianglePoints, AI.black, 1, p.color);
   } else if (p.shape === "square") {
-    const topLeft = AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight);
-    const bottomRight = AbstractImage.createPoint(position.x + halfWidth, position.y + halfHeight);
-    return AbstractImage.createRectangle(topLeft, bottomRight, AbstractImage.black, 1, p.color);
+    const topLeft = AI.createPoint(position.x - halfWidth, position.y - halfHeight);
+    const bottomRight = AI.createPoint(position.x + halfWidth, position.y + halfHeight);
+    return AI.createRectangle(topLeft, bottomRight, AI.black, 1, p.color);
   } else {
-    const topLeft = AbstractImage.createPoint(position.x - halfWidth, position.y - halfHeight);
-    const bottomRight = AbstractImage.createPoint(position.x + halfWidth, position.y + halfHeight);
-    return AbstractImage.createEllipse(topLeft, bottomRight, AbstractImage.black, 1, p.color);
+    const topLeft = AI.createPoint(position.x - halfWidth, position.y - halfHeight);
+    const bottomRight = AI.createPoint(position.x + halfWidth, position.y + halfHeight);
+    return AI.createEllipse(topLeft, bottomRight, AI.black, 1, p.color);
   }
@@ -634,14 +577,14 @@ }
   yMax: number,
-  xTicks: Array<number>,
+  xTicks: ReadonlyArray<Axis.DiscreteAxisPoint>,
   xAxis: Axis.Axis,
-  chart: Chart
-): AbstractImage.Component {
+  grid: { readonly color: AI.Color; readonly thickness: number }
+): AI.Component {
   const xLines = xTicks.map((l) => {
-    const x = Axis.transformValue(l, xMin, xMax, xAxis);
-    const start = AbstractImage.createPoint(x, yMin);
-    const end = AbstractImage.createPoint(x, yMax);
-    return AbstractImage.createLine(start, end, chart.gridColor, chart.gridThickness);
+    const x = Axis.transformValue(l.value, xMin, xMax, xAxis);
+    const start = AI.createPoint(x, yMin);
+    const end = AI.createPoint(x, yMax);
+    return AI.createLine(start, end, grid.color, grid.thickness);
   });
 
-  return AbstractImage.createGroup("Lines", xLines);
+  return AI.createGroup("Lines", xLines);
 }
@@ -653,17 +596,17 @@
   y: number,
-  growVertical: AbstractImage.GrowthDirection,
-  xTicks: Array<number>,
-  xAxis: Axis.Axis,
+  growVertical: AI.GrowthDirection,
+  ticks: ReadonlyArray<Axis.DiscreteAxisPoint>,
+  axis: Axis.Axis,
   chart: Chart
-): AbstractImage.Component {
-  const xLabels = xTicks.map((l) => {
-    const position = AbstractImage.createPoint(Axis.transformValue(l, xMin, xMax, xAxis), y);
-    return AbstractImage.createText(
+): AI.Component {
+  const xLabels = ticks.map((l) => {
+    const position = AI.createPoint(Axis.transformValue(l.value, xMin, xMax, axis), y);
+    return AI.createText(
       position,
-      formatNumber(l),
+      l.label ?? formatNumber(l.value),
       chart.font,
-      chart.fontSize,
-      AbstractImage.black,
+      axis.tickFontSize ?? chart.fontSize,
+      axis.labelColor ?? AI.black,
       "normal",
-      0,
+      axis.labelRotation ?? 0,
       "center",
@@ -673,7 +616,7 @@ "uniform",
       0,
-      AbstractImage.black,
+      axis.labelColor ?? AI.black,
       false
     );
   });
-  return AbstractImage.createGroup("Labels", xLabels);
+  return AI.createGroup("Labels", xLabels);
 }
@@ -684,14 +627,14 @@
   y: number,
-  horizontalGrowthDirection: AbstractImage.GrowthDirection,
-  verticalGrowthDirection: AbstractImage.GrowthDirection,
-  label: string,
+  horizontalGrowthDirection: AI.GrowthDirection,
+  verticalGrowthDirection: AI.GrowthDirection,
+  axis: Axis.Axis,
   chart: Chart
-): AbstractImage.Component {
-  const position = AbstractImage.createPoint(x, y);
-  return AbstractImage.createText(
+): AI.Component {
+  const position = AI.createPoint(x, y);
+  return AI.createText(
     position,
-    label,
+    axis.label,
     chart.font,
-    chart.fontSize,
-    AbstractImage.black,
+    axis.axisFontSize ?? chart.fontSize,
+    axis.labelColor ?? AI.black,
     "normal",
@@ -703,3 +646,3 @@ 0,
     0,
-    AbstractImage.black,
+    axis.labelColor ?? AI.black,
     false
@@ -714,13 +657,13 @@ );
   yMax: number,
-  yTicks: Array<number>,
+  yTicks: ReadonlyArray<Axis.DiscreteAxisPoint>,
   yAxis: Axis.Axis,
-  chart: Chart
-): AbstractImage.Component {
+  grid: { readonly color: AI.Color; readonly thickness: number }
+): AI.Component {
   const yLines = yTicks.map((l) => {
-    const y = Axis.transformValue(l, yMin, yMax, yAxis);
-    const start = AbstractImage.createPoint(xMin, y);
-    const end = AbstractImage.createPoint(xMax, y);
-    return AbstractImage.createLine(start, end, chart.gridColor, chart.gridThickness);
+    const y = Axis.transformValue(l.value, yMin, yMax, yAxis);
+    const start = AI.createPoint(xMin, y);
+    const end = AI.createPoint(xMax, y);
+    return AI.createLine(start, end, grid.color, grid.thickness);
   });
-  return AbstractImage.createGroup("Lines", yLines);
+  return AI.createGroup("Lines", yLines);
 }
@@ -732,17 +675,17 @@
   yMax: number,
-  growHorizontal: AbstractImage.GrowthDirection,
-  yTicks: Array<number>,
+  growHorizontal: AI.GrowthDirection,
+  yTicks: ReadonlyArray<Axis.DiscreteAxisPoint>,
   yAxis: Axis.Axis,
   chart: Chart
-): AbstractImage.Component {
+): AI.Component {
   const yLabels = yTicks.map((l) => {
-    const position = AbstractImage.createPoint(x, Axis.transformValue(l, yMin, yMax, yAxis));
-    return AbstractImage.createText(
+    const position = AI.createPoint(x, Axis.transformValue(l.value, yMin, yMax, yAxis));
+    return AI.createText(
       position,
-      formatNumber(l),
+      l.label ?? formatNumber(l.value),
       chart.font,
-      chart.fontSize,
-      AbstractImage.black,
+      yAxis.tickFontSize ?? chart.fontSize,
+      yAxis.labelColor ?? AI.black,
       "normal",
-      0,
+      yAxis.labelRotation ?? 0,
       "center",
@@ -752,7 +695,7 @@ growHorizontal,
       0,
-      AbstractImage.black,
+      yAxis.labelColor ?? AI.black,
       false
     );
   });
-  return AbstractImage.createGroup("Labels", yLabels);
+  return AI.createGroup("Labels", yLabels);
 }
@@ -763,14 +706,14 @@
   y: number,
-  horizontalGrowthDirection: AbstractImage.GrowthDirection,
-  verticalGrowthDirection: AbstractImage.GrowthDirection,
-  label: string,
+  horizontalGrowthDirection: AI.GrowthDirection,
+  verticalGrowthDirection: AI.GrowthDirection,
+  axis: Axis.Axis,
   chart: Chart
-): AbstractImage.Component {
-  const position = AbstractImage.createPoint(x, y);
-  return AbstractImage.createText(
+): AI.Component {
+  const position = AI.createPoint(x, y);
+  return AI.createText(
     position,
-    label,
+    axis.label,
     chart.font,
-    chart.fontSize,
-    AbstractImage.black,
+    axis.axisFontSize ?? chart.fontSize,
+    axis.labelColor ?? AI.black,
     "normal",
@@ -782,3 +725,3 @@ -90,
     0,
-    AbstractImage.black,
+    axis.labelColor ?? AI.black,
     false
@@ -785,0 +728,0 @@ );

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Total package byte prevSize

116503

increased by16.94%

Lines of code

1632

increased by5.49%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updatedabstract-image@^7.0.1