Customize highlighter

Question

I am unable to customize the style of the default highlighter. I've tried using code from documentation like this:

this.paper.on('element:pointerdown', function(elementView) {
  elementView.highlight({
    name: 'stroke',
    options: {
      padding: 10,
      rx: 5,
      ry: 5,
      attrs: {
        'stroke-width': 13,
        stroke: '#FF0000'
      }
    }
  });
});

but it dosesn't make any changes to the default yellow 3px highlighter.

Answer 1

I've solved my problem by simply overriding css class;

.joint-highlight-stroke.joint-theme-default {
    stroke: #0157B9 !important;
    stroke-width: 3px !important;
}

Answer 2

the following works for me:

this.paper.on('element:pointerdown', function(elementView) {
  elementView.highlight(null /* defaults to cellView.el */, {
    highlighter:{
      name: 'stroke',
      options: {
        padding: 10,
        rx: 5,
        ry: 5,
        attrs: {
          'stroke-width': 13,
          stroke: '#FF0000'
        }
      }
    }
  });
});

https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#highlighters