High charts not showing in Navigator

[kmdy7991]

Introduction

Hi, I'm using Vue.js3 and building charts using Highcharts.

I'm building Highcharts as a component and using joint.util.svg to mark up external objects. It's visible on the screen, but not on the minimap.

Is it because the svg in the external object tag of the minimap is corrupted and not showing up?
Is there any way to display the chart on the minimap?

Steps to reproduce

const makeCustomHTMLElement = (x, y, width, height, id=null, type='') => {
const CustomHTMLElement = dia.Element.define('html.Element', {
markup:
util.svg <foreignObject @selector="foreignObject" width="${width}" height="${height}" style="overflow: visible;"> <div xmlns="http://www.w3.org/1999/xhtml"> <div class="vue-container" style="box-sizing: border-box;"></div> </div> </foreignObject>
})

const htmlElement = makeCustomHTMLElement(x, y, width, height, id)
graph.addCell(htmlElement)
const vueContainer = paper.findViewByModel(htmlElement).el.querySelector('.vue-container')
const app = createApp(GeneralChart, {
projectId: projectId,
width: width,
height: height,
element: element,
onUpdateIntervalValue: (data) => {
const item = {path:route.path, id:data}
emit('update:intervalCommonBoardTabArrayValue', item)
}
})

• GeneralChart is a component of the high chart.

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[kumilingus]

The navigator is just another paper. You need to create another app and append it the navigator's paper.

const vueContainerNavigator = navigator.targetPaper.findViewByModel(htmlElement).el.querySelector('.vue-container');

But a proper solution would be to create a custom element view that creates/destroys app internally: https://docs.jointjs.com/learn/features/shapes/custom-shapes/#custom-views

Question is if you really want to show this level of detail inside the navigator. You can consider showing a lightweight version of element view there: https://www.jointjs.com/demos/collapsible-minimap