eChart: how can I make the tooltip visible?

General
,
41

That's because you are missing the first `

`${value} °C`
42

I don't recall seeing that syntax in the echarts docs.

43

Oh, I see what you are doing. Where exactly in the options heirarchy should that go?

44

That is the top level option setting tooltip. You have configured a tooltip within the temperature series, not at the top level. It does look as if you should be able to do what you want using the top level tooltip.
Completely remove any existing tooltip settings that you have and put this right at the start of the settings

    "tooltip": {
        "formatter": "{a0} {c0} °C<br />{a1} {c1}<br />{a2} {c2} %"
    },
45

Ah, that works, thank you! :smile: How can I parse {c0} here, since it contains time AND value?

image
image371×354 19.7 KB

46

I don't know why it is showing the time, my interpretation of the docs is that {b0} should show the time (category) and if you include it then it shows the time twice. You could ask on an eCharts forum.

47

I think you have already worked that out, but - in the top level tooltip

option = {

	tooltip: { 
		trigger: 'axis',
		valueFormatter: (value) => this.formatToolTip(value),

		axisPointer: {
      				  type: "none",
      				  snap: true,
    		         },
								
	},

}

As you can see you can also use an external method

48

Have you checked for any x axis tooltip formatting?

49

Have you tested that using msg.ui_update.chartOptions rather than in code?
I suspect that the chart node would have to detect that a callback function has been provided and handle it appropriately. It does not do that at the moment.

50

There is nothing in the ui-chart node that specifies any tooltip formatting, it is left at the default, and the injected chartOptions also do not include anything other than

"tooltip": {
        "formatter": "{a0} {c0} °C<br />{a1} {c1}<br />{a2} {c2} %"
    },
51

Ooops. Got carried away there. I forgot we were only looking at the chart node

I cannot get

"tooltip": {
        "formatter": "{a0} {c0} °C<br />{a1} {c1}<br />{a2} {c2} %"
    },

to work, and I could never figure it out when I was writing my eChart in a ui_template node either. I get the Series OK but the rest is just [Object object] (plus if there is no data for one of the Series for a particular time I get {c0})

52

Can you post an example of it not working, using msg.ui_update, so that I can see if it is the node at fault? It is working for me at least with the chart above, apart from the fact that the time is shown when it should not be.
Also, for me, if one of the series has no data then it is not shown in the tooltip.

53

I just tried it again, and it is now working (apart from having the epoch timestamp included i.e. x axis & y axis values) Also as before if a value in 1 series is missing for a particular time it shows {a?} {c?} °C

I have no idea what changed!!!

54

Having experimented a bit more then I do see this under some circumstances.

If you do something similar in a ui-template node then do you not see that, and do you not get the time showing when it should not?

55

I could never get to grip with how to use this formatter so I have always either used valueFormatter in the main tooltip Object for single Series or in the Series Object for multiple Series.

I tried formatter: '{a0} {c0} °C<br />{a1} {c1} °C' in one of my template charts and was back to the [object Object] °C when there was data and {a0} {c0} °C when there wasn't. I also tried changing 'axis' to 'item' but then there was no tooltip at all.

The problem with chartOptions is the fact that it is merged with any previous chartOptions and the existing chart option Object, this makes if difficult to remove previous settings. It would be handy if the options Object could be exported so that we could check it.

56

There are two enhancements I want to add when I have time (which won't be in the next couple of weeks). One is to add a Reset operation which throws away all previous chartOptions applied and re-creates the chart with the existing process data, which will be useful whilst experimenting with options. The second is to add the ability to provide callback functions for chart options that support that.

2 Likes
57

Very much appreciated!