diff --git a/src/plugins/d3/__stories__/bar-x/Grouped.stories.tsx b/src/plugins/d3/__stories__/bar-x/Grouped.stories.tsx
index 28af6065..1aabda37 100644
--- a/src/plugins/d3/__stories__/bar-x/Grouped.stories.tsx
+++ b/src/plugins/d3/__stories__/bar-x/Grouped.stories.tsx
@@ -23,6 +23,7 @@ const Template: Story = () => {
type: 'linear',
labels: {enabled: true},
min: 0,
+ lineColor: 'transparent',
},
],
series: {
diff --git a/src/plugins/d3/renderer/components/AxisX.tsx b/src/plugins/d3/renderer/components/AxisX.tsx
index 7f869e11..17cdade3 100644
--- a/src/plugins/d3/renderer/components/AxisX.tsx
+++ b/src/plugins/d3/renderer/components/AxisX.tsx
@@ -3,14 +3,15 @@ import {axisBottom, select} from 'd3';
import type {AxisScale, AxisDomain, Selection} from 'd3';
import {block} from '../../../../utils/cn';
-import type {ChartOptions, ChartScale} from '../hooks';
+
+import type {ChartScale, PreparedAxis} from '../hooks';
import {formatAxisTickLabel, parseTransformStyle} from '../utils';
const b = block('d3-axis');
const EMPTY_SPACE_BETWEEN_LABELS = 10;
type Props = {
- axis: ChartOptions['xAxis'];
+ axis: PreparedAxis;
width: number;
height: number;
scale: ChartScale;
@@ -70,7 +71,10 @@ export const AxisX = ({axis, width, height, scale}: Props) => {
}
svgElement.call(xAxisGenerator).attr('class', b());
- svgElement.select('.domain').attr('d', `M0,0V0H${width}`);
+ svgElement
+ .select('.domain')
+ .attr('d', `M0,0V0H${width}`)
+ .style('stroke', axis.lineColor || '');
if (axis.labels.enabled) {
svgElement.selectAll('.tick text').style('font-size', axis.labels.style.fontSize);
diff --git a/src/plugins/d3/renderer/components/AxisY.tsx b/src/plugins/d3/renderer/components/AxisY.tsx
index 17eccf9c..c6e0d197 100644
--- a/src/plugins/d3/renderer/components/AxisY.tsx
+++ b/src/plugins/d3/renderer/components/AxisY.tsx
@@ -3,14 +3,15 @@ import {axisLeft, select} from 'd3';
import type {AxisScale, AxisDomain, Selection} from 'd3';
import {block} from '../../../../utils/cn';
-import type {ChartOptions, ChartScale} from '../hooks';
+
+import type {ChartScale, PreparedAxis} from '../hooks';
import {formatAxisTickLabel, parseTransformStyle} from '../utils';
const b = block('d3-axis');
const EMPTY_SPACE_BETWEEN_LABELS = 10;
type Props = {
- axises: ChartOptions['yAxis'];
+ axises: PreparedAxis[];
width: number;
height: number;
scale: ChartScale;
@@ -71,7 +72,10 @@ export const AxisY = ({axises, width, height, scale}: Props) => {
}
svgElement.call(yAxisGenerator).attr('class', b());
- svgElement.select('.domain').attr('d', `M0,${height}H0V0`);
+ svgElement
+ .select('.domain')
+ .attr('d', `M0,${height}H0V0`)
+ .style('stroke', axis.lineColor || '');
if (axis.labels.enabled) {
svgElement
diff --git a/src/plugins/d3/renderer/components/Tooltip/index.tsx b/src/plugins/d3/renderer/components/Tooltip/index.tsx
index 768f91c9..c8053c62 100644
--- a/src/plugins/d3/renderer/components/Tooltip/index.tsx
+++ b/src/plugins/d3/renderer/components/Tooltip/index.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import isNil from 'lodash/isNil';
import type {TooltipHoveredData} from '../../../../../types/widget-data';
import {block} from '../../../../../utils/cn';
@@ -46,13 +47,17 @@ export const Tooltip = (props: TooltipProps) => {
return undefined;
}, [hovered, pointerPosition, size]);
const content = React.useMemo(() => {
- if (tooltip.renderer && hovered) {
- return tooltip.renderer({hovered});
- } else if (hovered) {
- return ;
+ if (!hovered) {
+ return null;
}
- return null;
+ const customTooltip = tooltip.renderer?.({hovered});
+
+ return isNil(customTooltip) ? (
+
+ ) : (
+ customTooltip
+ );
}, [hovered, tooltip, xAxis, yAxis]);
if (!position || !hovered) {
diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts b/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts
index fbf0b5ca..53e9d97d 100644
--- a/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts
+++ b/src/plugins/d3/renderer/hooks/useChartOptions/x-axis.ts
@@ -26,6 +26,7 @@ export const getPreparedXAxis = ({xAxis}: {xAxis: ChartKitWidgetData['xAxis']}):
numberFormat: get(xAxis, 'labels.numberFormat'),
style: {fontSize: get(xAxis, 'labels.style.fontSize', DEFAULT_AXIS_LABEL_FONT_SIZE)},
},
+ lineColor: get(xAxis, 'lineColor'),
categories: get(xAxis, 'categories'),
timestamps: get(xAxis, 'timestamps'),
title: {
diff --git a/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts b/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts
index b1b0e2d2..686599ab 100644
--- a/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts
+++ b/src/plugins/d3/renderer/hooks/useChartOptions/y-axis.ts
@@ -30,6 +30,7 @@ export const getPreparedYAxis = ({yAxis}: {yAxis: ChartKitWidgetData['yAxis']}):
numberFormat: get(yAxis1, 'labels.numberFormat'),
style: y1LabelsStyle,
},
+ lineColor: get(yAxis1, 'lineColor'),
categories: get(yAxis1, 'categories'),
timestamps: get(yAxis1, 'timestamps'),
title: {
diff --git a/src/types/widget-data/axis.ts b/src/types/widget-data/axis.ts
index 372cd930..ce5c984f 100644
--- a/src/types/widget-data/axis.ts
+++ b/src/types/widget-data/axis.ts
@@ -4,9 +4,9 @@ import type {BaseTextStyle} from './base';
export type ChartKitWidgetAxisType = 'category' | 'datetime' | 'linear';
export type ChartKitWidgetAxisLabels = {
- /** Enable or disable the axis labels */
+ /** Enable or disable the axis labels. */
enabled?: boolean;
- /** The pixel padding for axis labels */
+ /** The pixel padding for axis labels. */
padding?: number;
dateFormat?: string;
numberFormat?: FormatNumberOptions;
@@ -17,15 +17,16 @@ export type ChartKitWidgetAxis = {
categories?: string[];
timestamps?: number[];
type?: ChartKitWidgetAxisType;
- /** The axis labels show the number or category for each tick */
+ /** The axis labels show the number or category for each tick. */
labels?: ChartKitWidgetAxisLabels;
+ /** The color of the line marking the axis itself. */
+ lineColor?: string;
title?: {
text?: string;
};
-
- /** The minimum value of the axis. If undefined the min value is automatically calculate */
+ /** The minimum value of the axis. If undefined the min value is automatically calculate. */
min?: number;
-
+ /** The grid lines settings. */
grid?: {
/** Enable or disable the grid lines.
*
@@ -33,17 +34,15 @@ export type ChartKitWidgetAxis = {
* */
enabled?: boolean;
};
-
ticks?: {
/** Pixel interval of the tick marks. Not applicable to categorized axis.
* The specified value is only a hint; the interval between ticks can be greater or less depending on the data. */
pixelInterval?: number;
};
-
/** Padding of the max value relative to the length of the axis.
* A padding of 0.05 will make a 100px axis 5px longer.
*
- * Defaults to 0.05 for Y axis and to 0.01 for X axis
+ * Defaults to 0.05 for Y axis and to 0.01 for X axis.
* */
maxPadding?: number;
};
diff --git a/src/types/widget-data/tooltip.ts b/src/types/widget-data/tooltip.ts
index 4831fc62..f056a694 100644
--- a/src/types/widget-data/tooltip.ts
+++ b/src/types/widget-data/tooltip.ts
@@ -7,5 +7,6 @@ export type TooltipHoveredData = {
export type ChartKitWidgetTooltip = {
enabled?: boolean;
+ /** Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used. */
renderer?: (data: {hovered: TooltipHoveredData}) => React.ReactElement;
};