diff --git a/AUTHORS.txt b/AUTHORS.txt index 9464d2067..190f058b2 100644 --- a/AUTHORS.txt +++ b/AUTHORS.txt @@ -50,3 +50,4 @@ Adrian Schmutzler Aziz Gazanchiyan Eben Collins Shim Heungwoon +Marcos Gomez Castillo diff --git a/src/ChartInternal/Axis/Axis.ts b/src/ChartInternal/Axis/Axis.ts index 2940dca71..9d87d198a 100644 --- a/src/ChartInternal/Axis/Axis.ts +++ b/src/ChartInternal/Axis/Axis.ts @@ -945,13 +945,16 @@ class Axis { // subchart x axis should be aligned with x axis culling const id = type === "subX" ? "x" : type; - const toCull = config[`axis_${id}_tick_culling`]; + + const cullingOptionPrefix = `axis_${id}_tick_culling`; + const toCull = config[cullingOptionPrefix]; if (axis && toCull) { - const tickText = axis.selectAll(".tick text"); - const tickValues = sortValue(tickText.data()); + const tickNodes = axis.selectAll(".tick"); + const tickValues = sortValue(tickNodes.data()); const tickSize = tickValues.length; - const cullingMax = config[`axis_${id}_tick_culling_max`]; + const cullingMax = config[`${cullingOptionPrefix}_max`]; + const lines = config[`${cullingOptionPrefix}_lines`]; let intervalForCulling; if (tickSize) { @@ -962,11 +965,14 @@ class Axis { } } - tickText.each(function(d) { - this.style.display = tickValues.indexOf(d) % intervalForCulling ? "none" : null; + tickNodes.each(function(d) { + if (tickValues.indexOf(d) % intervalForCulling) { + (lines ? this.querySelector("text") : this) + .style.display = "none"; + } }); } else { - tickText.style("display", null); + tickNodes.style("display", null); } // set/unset x_axis_tick_clippath diff --git a/src/config/Options/axis/x.ts b/src/config/Options/axis/x.ts index de8a1e3a8..b103aaae7 100644 --- a/src/config/Options/axis/x.ts +++ b/src/config/Options/axis/x.ts @@ -143,15 +143,16 @@ export default { axis_x_tick_format: undefined, /** - * Setting for culling ticks.

- * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.

- * We can change the number of ticks to be shown by axis.x.tick.culling.max. + * Setting for culling ticks. + * - `true`: the ticks will be culled, then only limited tick text will be shown.
+ * This option does not hide the tick lines by default, if want to hide tick lines, set `axis.x.tick.culling.lines=false`. + * - `false`: all of ticks will be shown.

+ * The number of ticks to be shown can be chaned by `axis.x.tick.culling.max`. * @name axis․x․tick․culling * @memberof Options * @type {boolean} * @default - * - true for indexed axis and timeseries axis - * - false for category axis + * `true` for indexed axis and timeseries axis, `false` for category axis * @example * axis: { * x: { @@ -182,6 +183,25 @@ export default { */ axis_x_tick_culling_max: 10, + /** + * Control visibility of tick lines within culling option, along with tick text. + * @name axis․x․tick․culling․lines + * @memberof Options + * @type {boolean} + * @default true + * @example + * axis: { + * x: { + * tick: { + * culling: { + * lines: false, + * } + * } + * } + * } + */ + axis_x_tick_culling_lines: true, + /** * The number of x axis ticks to show.

* This option hides tick lines together with tick text. If this option is used on timeseries axis, the ticks position will be determined precisely and not nicely positioned (e.g. it will have rough second value). diff --git a/src/config/Options/axis/y.ts b/src/config/Options/axis/y.ts index 35d3ae8b7..8287eb3c0 100644 --- a/src/config/Options/axis/y.ts +++ b/src/config/Options/axis/y.ts @@ -187,9 +187,11 @@ export default { axis_y_tick_format: undefined, /** - * Setting for culling ticks.

- * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.

- * We can change the number of ticks to be shown by axis.y.tick.culling.max. + * Setting for culling ticks. + * - `true`: the ticks will be culled, then only limited tick text will be shown.
+ * This option does not hide the tick lines by default, if want to hide tick lines, set `axis.y.tick.culling.lines=false`. + * - `false`: all of ticks will be shown.

+ * The number of ticks to be shown can be chaned by `axis.y.tick.culling.max`. * @name axis․y․tick․culling * @memberof Options * @type {boolean} @@ -224,6 +226,25 @@ export default { */ axis_y_tick_culling_max: 5, + /** + * Control visibility of tick lines within culling option, along with tick text. + * @name axis․y․tick․culling․lines + * @memberof Options + * @type {boolean} + * @default true + * @example + * axis: { + * y: { + * tick: { + * culling: { + * lines: false, + * } + * } + * } + * } + */ + axis_y_tick_culling_lines: true, + /** * Show y axis outer tick. * @name axis․y․tick․outer diff --git a/src/config/Options/axis/y2.ts b/src/config/Options/axis/y2.ts index b35315cf7..90463c996 100644 --- a/src/config/Options/axis/y2.ts +++ b/src/config/Options/axis/y2.ts @@ -173,9 +173,11 @@ export default { axis_y2_tick_format: undefined, /** - * Setting for culling ticks.

- * If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.

- * We can change the number of ticks to be shown by axis.y.tick.culling.max. + * Setting for culling ticks. + * - `true`: the ticks will be culled, then only limited tick text will be shown.
+ * This option does not hide the tick lines by default, if want to hide tick lines, set `axis.y2.tick.culling.lines=false`. + * - `false`: all of ticks will be shown.

+ * The number of ticks to be shown can be chaned by `axis.y2.tick.culling.max`. * @name axis․y2․tick․culling * @memberof Options * @type {boolean} @@ -210,6 +212,25 @@ export default { */ axis_y2_tick_culling_max: 5, + /** + * Control visibility of tick lines within culling option, along with tick text. + * @name axis․y2․tick․culling․lines + * @memberof Options + * @type {boolean} + * @default true + * @example + * axis: { + * y2: { + * tick: { + * culling: { + * lines: false, + * } + * } + * } + * } + */ + axis_y2_tick_culling_lines: true, + /** * Show or hide y2 axis outer tick. * @name axis․y2․tick․outer diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts index ae57573e1..2033fe04b 100644 --- a/test/internals/axis-spec.ts +++ b/test/internals/axis-spec.ts @@ -2477,6 +2477,26 @@ describe("AXIS", function() { it("check tick values are culled when axis is rotated", () => { checkTickValues(); }); + + it("set options: set axes tick culling lines to 'false'", () => { + args.axis.x.tick.culling.lines = false; + args.axis.y.tick.culling.lines = false; + args.axis.y2.tick.culling = { + max: 3, + lines: false + }; + + args.subchart.show = false; + }); + + it("check that tick lines are hidden", () => { + const {$el: {axis}} = chart.internal; + const selector = ".tick:not([style='display: none;'])"; + + ["x", "y", "y2"].forEach(v => { + expect(axis[v].selectAll(selector).size()).to.be.equal(args.axis[v].tick.culling.max); + }); + }); }); describe("Axes tick padding", () => { diff --git a/types/axis.d.ts b/types/axis.d.ts index c00362bb6..f859fb854 100644 --- a/types/axis.d.ts +++ b/types/axis.d.ts @@ -197,14 +197,21 @@ export interface XTickConfiguration { /** * Setting for culling ticks. - * If true is set, the ticks will be culled, then only limitted tick text will be shown. - * This option does not hide the tick lines. If false is set, all of ticks will be shown. + * - `true`: the ticks will be culled, then only limited tick text will be shown. + * This option does not hide the tick lines by default, if want to hide tick lines, set `axis.x.tick.culling.lines=false`. + * - `false`: all of ticks will be shown. + * The number of ticks to be shown can be chaned by `axis.x.tick.culling.max`. */ culling?: boolean | { /** * The number of tick texts will be adjusted to less than this value. */ max?: number; + + /** + * Control visibility of tick lines within culling option, along with tick text. + */ + lines?: boolean; }; /** @@ -334,14 +341,21 @@ export interface YTickConfiguration { /** * Setting for culling ticks. - * If true is set, the ticks will be culled, then only limitted tick text will be shown. - * This option does not hide the tick lines. If false is set, all of ticks will be shown. + * - `true`: the ticks will be culled, then only limited tick text will be shown. + * This option does not hide the tick lines by default, if want to hide tick lines, set `axis.[y|y2].tick.culling.lines=false`. + * - `false`: all of ticks will be shown. + * The number of ticks to be shown can be chaned by `axis.[y|y2].tick.culling.max`. */ culling?: boolean | { /** * The number of tick texts will be adjusted to less than this value. */ max?: number; + + /** + * Control visibility of tick lines within culling option, along with tick text. + */ + lines?: boolean; }; /**