@toptal/picasso-charts 59.0.1-alpha-fx-5530-environmentbanner-1d40522f1.101 → 59.0.2-alpha-fx-5716-dropdown-arrows-do-not-match-with-base-ffbf5f56c.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-package/src/BarChart/BarChart.d.ts +1 -0
- package/dist-package/src/BarChart/BarChart.d.ts.map +1 -1
- package/dist-package/src/BarChart/BarChart.js +8 -4
- package/dist-package/src/BarChart/BarChart.js.map +1 -1
- package/package.json +3 -3
- package/src/BarChart/BarChart.tsx +32 -20
- package/src/BarChart/story/index.jsx +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAiB5E,aAAK,sBAAsB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;AAExE,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CACvD,SAAQ,cAAc;IACtB;;;OAGG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE;YACN,IAAI,EAAE,MAAM,CAAA;YACZ,KAAK,EAAE;iBAAG,GAAG,IAAI,CAAC,GAAG,GAAG;aAAE,CAAA;SAC3B,CAAA;QACD,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,KAAK,MAAM,CAAA;IACZ,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAA;IACjD,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,SAAS,CAAA;IACvD,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,8BAA8B;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAA;IACxB,8IAA8I;IAC9I,uBAAuB,CAAC,EAAE,sBAAsB,CAAA;IAChD,8IAA8I;IAC9I,uBAAuB,CAAC,EAAE,sBAAsB,CAAA;IAChD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iDAAiD;IACjD,sBAAsB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAA;CAC7E;AAeD,eAAO,MAAM,UAAU,wHAIlB,CAAA;AAKL,eAAO,MAAM,aAAa,gGACY,CAAA;AAMtC,QAAA,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiBtC,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAiB5E,aAAK,sBAAsB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAA;AAExE,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CACvD,SAAQ,cAAc;IACtB;;;OAGG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0CAA0C;IAC1C,WAAW,EAAE,CAAC,MAAM,EAAE;QACpB,OAAO,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE;YACN,IAAI,EAAE,MAAM,CAAA;YACZ,KAAK,EAAE;iBAAG,GAAG,IAAI,CAAC,GAAG,GAAG;aAAE,CAAA;SAC3B,CAAA;QACD,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,KAAK,MAAM,CAAA;IACZ,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAA;IACjD,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,SAAS,CAAA;IACvD,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,8BAA8B;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,EAAE,CAAA;IACxB,8IAA8I;IAC9I,uBAAuB,CAAC,EAAE,sBAAsB,CAAA;IAChD,8IAA8I;IAC9I,uBAAuB,CAAC,EAAE,sBAAsB,CAAA;IAChD,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iDAAiD;IACjD,sBAAsB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAA;CAC7E;AAeD,eAAO,MAAM,UAAU,wHAIlB,CAAA;AAKL,eAAO,MAAM,aAAa,gGACY,CAAA;AAMtC,QAAA,MAAM,QAAQ;;;;;;;;;;CAuJb,CAAA;AAWD,eAAe,QAAQ,CAAA"}
|
|
@@ -35,7 +35,7 @@ const DEFAULT_BAR_CATEGORY_GAP = 50;
|
|
|
35
35
|
const DEFAULT_BAR_SIZE = 32;
|
|
36
36
|
const DEFAULT_BAR_GAP = 2;
|
|
37
37
|
const BarChart = (_a) => {
|
|
38
|
-
var { data, className, height, width, tooltip, customTooltip, allowTooltipEscapeViewBox, getBarColor = defaultGetBarColor, labelKey, getBarLabelColor = defaultGetBarLabelColor, renderBarIndicators, testIds, showBarLabel, isAnimationActive, layout, stackedBars, showEveryNthTickOnXAxis = 1, showEveryNthTickOnYAxis = 1, autoSize, maxBarSize, valueAxisTickFormatter } = _a, rest = __rest(_a, ["data", "className", "height", "width", "tooltip", "customTooltip", "allowTooltipEscapeViewBox", "getBarColor", "labelKey", "getBarLabelColor", "renderBarIndicators", "testIds", "showBarLabel", "isAnimationActive", "layout", "stackedBars", "showEveryNthTickOnXAxis", "showEveryNthTickOnYAxis", "autoSize", "maxBarSize", "valueAxisTickFormatter"]);
|
|
38
|
+
var { data, className, height, width, tooltip, customTooltip, allowTooltipEscapeViewBox, getBarColor = defaultGetBarColor, labelKey = 'name', getBarLabelColor = defaultGetBarLabelColor, renderBarIndicators, testIds, showBarLabel, isAnimationActive, layout, stackedBars, showEveryNthTickOnXAxis = 1, showEveryNthTickOnYAxis = 1, autoSize, maxBarSize, valueAxisTickFormatter } = _a, rest = __rest(_a, ["data", "className", "height", "width", "tooltip", "customTooltip", "allowTooltipEscapeViewBox", "getBarColor", "labelKey", "getBarLabelColor", "renderBarIndicators", "testIds", "showBarLabel", "isAnimationActive", "layout", "stackedBars", "showEveryNthTickOnXAxis", "showEveryNthTickOnYAxis", "autoSize", "maxBarSize", "valueAxisTickFormatter"]);
|
|
39
39
|
const horizontal = layout === 'horizontal';
|
|
40
40
|
const dataKeys = Object.keys(data[0].value);
|
|
41
41
|
const formattedData = formatData(data);
|
|
@@ -43,7 +43,7 @@ const BarChart = (_a) => {
|
|
|
43
43
|
const topDomain = findTopDomain(extractValues(data), stackedBars);
|
|
44
44
|
const ticks = getD3Ticks(BOTTOM_DOMAIN, topDomain, NUMBER_OF_TICKS);
|
|
45
45
|
const categoryAxisProps = {
|
|
46
|
-
dataKey: labelKey
|
|
46
|
+
dataKey: labelKey,
|
|
47
47
|
height: TICK_HEIGHT,
|
|
48
48
|
interval: 0,
|
|
49
49
|
tick: { width: TICK_WIDTH },
|
|
@@ -56,13 +56,16 @@ const BarChart = (_a) => {
|
|
|
56
56
|
};
|
|
57
57
|
const xAxisProps = horizontal ? categoryAxisProps : valueAxisProps;
|
|
58
58
|
const yAxisProps = !horizontal ? categoryAxisProps : valueAxisProps;
|
|
59
|
+
// If ticks are not shown, the corresponding axis is not rendered to avoid empty space
|
|
60
|
+
const renderXAxis = showEveryNthTickOnXAxis !== 0;
|
|
61
|
+
const renderYAxis = showEveryNthTickOnYAxis !== 0;
|
|
59
62
|
return (React.createElement("div", Object.assign({ style: { height, width }, className: className }, rest),
|
|
60
63
|
React.createElement(StyleOverrides, null),
|
|
61
64
|
React.createElement(ResponsiveContainer, { width: width, height: height },
|
|
62
65
|
React.createElement(RechartsBarChart, { layout: layout, margin: chartMargins, data: formattedData, maxBarSize: maxBarSize, barGap: DEFAULT_BAR_GAP, barCategoryGap: !autoSize ? DEFAULT_BAR_CATEGORY_GAP : undefined, barSize: !autoSize ? DEFAULT_BAR_SIZE : undefined, overflow: 'visible' },
|
|
63
66
|
React.createElement(CartesianGrid, { strokeDasharray: '3 3', stroke: palette.grey.lighter2, vertical: !horizontal }),
|
|
64
|
-
React.createElement(XAxis, Object.assign({}, xAxisProps, { type: horizontal ? 'category' : 'number', tickLine: TICK_LINE, axisLine: AXIS_LINE, minTickGap: MIN_TICK_GAP, tickMargin: TICK_MARGIN, interval: showEveryNthTickOnXAxis - 1 })),
|
|
65
|
-
React.createElement(YAxis, Object.assign({}, yAxisProps, { type: horizontal ? 'number' : 'category', tickLine: TICK_LINE, axisLine: AXIS_LINE, minTickGap: MIN_TICK_GAP, tickMargin: TICK_MARGIN, interval: showEveryNthTickOnYAxis - 1 })),
|
|
67
|
+
renderXAxis && (React.createElement(XAxis, Object.assign({}, xAxisProps, { type: horizontal ? 'category' : 'number', tickLine: TICK_LINE, axisLine: AXIS_LINE, minTickGap: MIN_TICK_GAP, tickMargin: TICK_MARGIN, interval: showEveryNthTickOnXAxis - 1 }))),
|
|
68
|
+
renderYAxis && (React.createElement(YAxis, Object.assign({}, yAxisProps, { type: horizontal ? 'number' : 'category', tickLine: TICK_LINE, axisLine: AXIS_LINE, minTickGap: MIN_TICK_GAP, tickMargin: TICK_MARGIN, interval: showEveryNthTickOnYAxis - 1 }))),
|
|
66
69
|
tooltipElement,
|
|
67
70
|
dataKeys.map(dataKey => (React.createElement(Bar, { key: dataKey, dataKey: dataKey, label: showBarLabel ? (React.createElement(BarChartLabel, { dataKey: dataKey, getBarLabelColor: getBarLabelColor })) : undefined, isAnimationActive: isAnimationActive, stackId: stackedBars && defineStackId(dataKey, stackedBars) }, data.map((entry, index) => {
|
|
68
71
|
const fill = getBarColor === null || getBarColor === void 0 ? void 0 : getBarColor({ dataKey, entry, index });
|
|
@@ -75,6 +78,7 @@ BarChart.defaultProps = {
|
|
|
75
78
|
width: 'auto',
|
|
76
79
|
tooltip: false,
|
|
77
80
|
showBarLabel: true,
|
|
81
|
+
labelKey: 'name',
|
|
78
82
|
layout: 'horizontal',
|
|
79
83
|
};
|
|
80
84
|
export default BarChart;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/BarChart/BarChart.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC/C,OAAO,EACL,QAAQ,IAAI,gBAAgB,EAC5B,aAAa,EACb,KAAK,EACL,OAAO,EACP,GAAG,EACH,UAAU,EACV,KAAK,EACL,mBAAmB,EACnB,IAAI,GACL,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AAE9C,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAA;AAE1D,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACtD,OAAO,eAAe,EAAE,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAElE,MAAM,EACJ,WAAW,EACX,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,EACZ,aAAa,EACb,eAAe,EACf,UAAU,EACV,WAAW,GACZ,GAAG,eAAe,CAAA;AACnB,MAAM,qBAAqB,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,CAAA;AA+CjD,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,CAC3B,+BACE,uBAAuB,EAAE;QACvB,MAAM,EAAE;;;oBAGM,OAAO,CAAC,IAAI,CAAC,IAAI;;OAE9B;KACF,GACD,CACH,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CAAmB,IAAsB,EAAE,EAAE,CACrE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,iCAChB,QAAQ,CAAC,KAAK,GACd,QAAQ,EACX,CAAC,CAAA;AAEL,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAClD,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;AAEvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAmB,IAAsB,EAAE,EAAE,CACxE,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AAEtC,MAAM,wBAAwB,GAAG,EAAE,CAAA;AACnC,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAC3B,MAAM,eAAe,GAAG,CAAC,CAAA;AAEzB,MAAM,QAAQ,GAAG,CAAmB,EAuBzB,EAAE,EAAE;QAvBqB,EAClC,IAAI,EACJ,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,aAAa,EACb,yBAAyB,EACzB,WAAW,GAAG,kBAAkB,EAChC,QAAQ,
|
|
1
|
+
{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/BarChart/BarChart.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-charts",
|
|
3
|
-
"version": "59.0.
|
|
3
|
+
"version": "59.0.2-alpha-fx-5716-dropdown-arrows-do-not-match-with-base-ffbf5f56c.11+ffbf5f56c",
|
|
4
4
|
"description": "Charts components of Picasso",
|
|
5
5
|
"author": "Toptal",
|
|
6
6
|
"license": "MIT",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@types/d3-array": "3.0.4"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@toptal/picasso-utils": "1.0.4-alpha-fx-
|
|
35
|
+
"@toptal/picasso-utils": "1.0.4-alpha-fx-5716-dropdown-arrows-do-not-match-with-base-ffbf5f56c.119+ffbf5f56c",
|
|
36
36
|
"classnames": "^2.5.1",
|
|
37
37
|
"d3-array": "^3.2.2",
|
|
38
38
|
"debounce": "^1.2.1",
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"!dist-package/tsconfig.tsbuildinfo",
|
|
48
48
|
"src"
|
|
49
49
|
],
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "ffbf5f56c06f72191314e22ff490cbe4fd052c0f"
|
|
51
51
|
}
|
|
@@ -116,7 +116,7 @@ const BarChart = <T extends string>({
|
|
|
116
116
|
customTooltip,
|
|
117
117
|
allowTooltipEscapeViewBox,
|
|
118
118
|
getBarColor = defaultGetBarColor,
|
|
119
|
-
labelKey,
|
|
119
|
+
labelKey = 'name',
|
|
120
120
|
getBarLabelColor = defaultGetBarLabelColor,
|
|
121
121
|
renderBarIndicators,
|
|
122
122
|
testIds,
|
|
@@ -156,7 +156,7 @@ const BarChart = <T extends string>({
|
|
|
156
156
|
const ticks = getD3Ticks(BOTTOM_DOMAIN, topDomain, NUMBER_OF_TICKS)
|
|
157
157
|
|
|
158
158
|
const categoryAxisProps = {
|
|
159
|
-
dataKey: labelKey
|
|
159
|
+
dataKey: labelKey,
|
|
160
160
|
height: TICK_HEIGHT,
|
|
161
161
|
interval: 0,
|
|
162
162
|
tick: { width: TICK_WIDTH },
|
|
@@ -171,6 +171,10 @@ const BarChart = <T extends string>({
|
|
|
171
171
|
const xAxisProps = horizontal ? categoryAxisProps : valueAxisProps
|
|
172
172
|
const yAxisProps = !horizontal ? categoryAxisProps : valueAxisProps
|
|
173
173
|
|
|
174
|
+
// If ticks are not shown, the corresponding axis is not rendered to avoid empty space
|
|
175
|
+
const renderXAxis = showEveryNthTickOnXAxis !== 0
|
|
176
|
+
const renderYAxis = showEveryNthTickOnYAxis !== 0
|
|
177
|
+
|
|
174
178
|
return (
|
|
175
179
|
<div style={{ height, width }} className={className} {...rest}>
|
|
176
180
|
<StyleOverrides />
|
|
@@ -190,24 +194,31 @@ const BarChart = <T extends string>({
|
|
|
190
194
|
stroke={palette.grey.lighter2}
|
|
191
195
|
vertical={!horizontal}
|
|
192
196
|
/>
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
197
|
+
|
|
198
|
+
{renderXAxis && (
|
|
199
|
+
<XAxis
|
|
200
|
+
{...xAxisProps}
|
|
201
|
+
type={horizontal ? 'category' : 'number'}
|
|
202
|
+
tickLine={TICK_LINE}
|
|
203
|
+
axisLine={AXIS_LINE}
|
|
204
|
+
minTickGap={MIN_TICK_GAP}
|
|
205
|
+
tickMargin={TICK_MARGIN}
|
|
206
|
+
interval={showEveryNthTickOnXAxis - 1}
|
|
207
|
+
/>
|
|
208
|
+
)}
|
|
209
|
+
|
|
210
|
+
{renderYAxis && (
|
|
211
|
+
<YAxis
|
|
212
|
+
{...yAxisProps}
|
|
213
|
+
type={horizontal ? 'number' : 'category'}
|
|
214
|
+
tickLine={TICK_LINE}
|
|
215
|
+
axisLine={AXIS_LINE}
|
|
216
|
+
minTickGap={MIN_TICK_GAP}
|
|
217
|
+
tickMargin={TICK_MARGIN}
|
|
218
|
+
interval={showEveryNthTickOnYAxis - 1}
|
|
219
|
+
/>
|
|
220
|
+
)}
|
|
221
|
+
|
|
211
222
|
{tooltipElement}
|
|
212
223
|
{dataKeys.map(dataKey => (
|
|
213
224
|
<Bar
|
|
@@ -254,6 +265,7 @@ BarChart.defaultProps = {
|
|
|
254
265
|
width: 'auto',
|
|
255
266
|
tooltip: false,
|
|
256
267
|
showBarLabel: true,
|
|
268
|
+
labelKey: 'name',
|
|
257
269
|
layout: 'horizontal',
|
|
258
270
|
}
|
|
259
271
|
|
|
@@ -65,7 +65,8 @@ page
|
|
|
65
65
|
takeScreenshot: false,
|
|
66
66
|
})
|
|
67
67
|
.addExample('BarChart/story/ShowEveryNthTick.example.tsx', {
|
|
68
|
-
title:
|
|
68
|
+
title:
|
|
69
|
+
'Show every Nth tick on X or Y-axis (or hide axis labels completely)',
|
|
69
70
|
description: `You can show every Nth tick for X-axis or Y-axis. "0" hides all ticks, "1" shows all ticks (default behavior). The example below has "showEveryNthTickOnXAxis={3}" (every third tick is shown on X-axis) and "showEveryNthTickOnYAxis={0}" (no ticks are shown on Y-axis).`,
|
|
70
71
|
takeScreenshot: false,
|
|
71
72
|
})
|