feat: custom axis labeling from kernel side.

bqplot/axes.py

@@ -85,6 +85,10 @@ class Axis(BaseAxis):
         If tick_values is None, number of ticks
     tick_values: numpy.ndarray or None (default: None)
         Tick values for the axis
+    tick_labels: dict (default: None)
+        Override the tick labels with a dictionary of {value: label}.
+        Entries are optional, and if not provided, the default tick labels
+        will be used.
     offset: dict (default: {})
         Contains a scale and a value {'scale': scale or None,
         'value': value of the offset}
@@ -128,6 +132,7 @@ class Axis(BaseAxis):
     tick_values = Array(None, allow_none=True)\
         .tag(sync=True, **array_serialization)\
         .valid(array_dimension_bounds(1, 1))
+    tick_labels = Dict(None, allow_none=True).tag(sync=True)
     offset = Dict().tag(sync=True, **widget_serialization)
     label_location = Enum(['middle', 'start', 'end'],
                           default_value='middle').tag(sync=True)

examples/Advanced Plotting/Axis Properties.ipynb

@@ -212,6 +212,35 @@
     "xax.tick_style = {'stroke': 'orangered', 'font-size': 14}"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Tick labels\n",
+    "The tick label dictionary can override a label "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Roman labeling\n",
+    "xax.tick_labels = {\n",
+    "    1: 'I',\n",
+    "    3: 'III',\n",
+    "    5: 'V',\n",
+    "    7: 'VII',\n",
+    "    9: 'IX',\n",
+    "    11: 'XI',\n",
+    "    13: 'XIII',\n",
+    "    15: 'XV',\n",
+    "    17: 'XVII',\n",
+    "    19: 'XIX'\n",
+    "}"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},

js/src/Axis.ts

@@ -75,6 +75,7 @@ export class Axis extends WidgetView {
     // Tick attributes
     this.listenTo(this.model, 'change:tick_values', this.set_tick_values);
     this.listenTo(this.model, 'change:tick_format', this.tickformat_changed);
+    this.listenTo(this.model, 'change:tick_labels', this.tick_labels_changed);
     this.listenTo(this.model, 'change:num_ticks', this.set_tick_values);
     this.listenTo(this.model, 'change:tick_rotate', this.apply_tick_styling);
     this.listenTo(this.model, 'change:tick_style', this.apply_tick_styling);
@@ -221,6 +222,10 @@ export class Axis extends WidgetView {
     this.apply_tick_styling();
   }
 
+  tick_labels_changed() {
+    this.tickformat_changed();
+  }
+
   apply_tick_styling() {
     // Applies current tick styling to all displayed ticks
     const tickText = this.g_axisline.selectAll('.tick text');
@@ -280,6 +285,24 @@ export class Axis extends WidgetView {
   }
 
   generate_tick_formatter() {
+    const default_formatter = this.generate_default_tick_formatter();
+    const tickLabels = this.model.get('tick_labels');
+    if (tickLabels && Object.keys(tickLabels).length > 0) {
+        const formatter = (data) => {
+          let value = tickLabels[data];
+          if (value === undefined) {
+            return default_formatter(data);
+          } else {
+            return value;
+          }
+        };
+        return formatter;
+    } else {
+      return default_formatter
+    }
+  }
+
+  generate_default_tick_formatter() {
     if (isDateScale(this.axis_scale) || isDateColorScale(this.axis_scale)) {
       if (this.model.get('tick_format')) {
         return d3.utcFormat(this.model.get('tick_format'));

js/src/AxisModel.ts

@@ -33,6 +33,7 @@ export class AxisModel extends widgets.WidgetModel {
       label: '',
       grid_lines: 'solid',
       tick_format: null,
+      tick_labels: null,
       scale: undefined,
       num_ticks: null,
       tick_values: [],