In K chart, tooltip always shows the same format even modified the setting in formatter

@miluylin commented on Tue Jun 13 2017

I'm new for JS but would like to change the original format to new format at the top of K chart as below. Would you please let me know how to modify the tooltip in K chart?

orignal format is 2017-06-13 Open開盤：xxxx High最高：xxxx Close收盤：xxxx Low最低：xxxx

new format is 2017-06-13 Open：xxxx | High：xxxx | Close：xxxx | Low最低：xxxx so I try to modifiy the formatter in few ways. 1. copy the JS add " "

formatter = "function (params) {
                         var res = params[0].name;
                         for (var i = 0, l = params.length; i < l; i++) {
                             res += ' | ' + ' : ' + params[i].value;
                         }
                      }"

K chart only has one date with column c(open, close, low, high), the seriesName should be wrong to my purpose. and use ' ' to include the function

formatter = JS('function(params) {
                         ${params[0].seriesName}:${params[0].value} |
                         ${params[1].seriesName}:${params[1].value} |
                         ${params[2].seriesName}:${params[2].value} |
                         ${params[3].seriesName}:${params[3].value} |
                    ')

append the [i] to the value,

formatter=JS('function (params) {
                      return params.seriesName +
                             "| Open : " + params.value[0] +
                             "| Close : " +  params.value[1] +
                             "| Low : " + params.value[2] +
                             "| High : " + params.value[3]; }')

default string "{a} < br/>{b} : {c}" but I don't know how to modify it for K chart.

Thanks

@madlogos commented on Wed Jun 14 2017

This should be under recharts instead of recharts2.

Previously I did not include a high-level method to modify formatter. Now I just released a patch to GitHub to fix it. You can try it out.

Build an instance following the example:

 g <- echartr(stock, as.character(date), c(open, close, low, high), type='k') %>%
     setXAxis(name='Date', axisLabel=list(rotate=30)) %>%
     setYAxis(name="Price")

By cat(g$x$tooltip$formatter), you will see the default tooltip for K chart:

function (params) {
        var res = params[0].name;
        res += "<br/>Open开盘 : " + params[0].value[0] +
        "<br/>High最高 : " + params[0].value[3];
        res += "<br/>Close收盘 : " + params[0].value[1] +
        "<br/>Low最低 : " + params[0].value[2];
        return res;
    }

So then:

g %>% setTT(formatter=JS('function (params) {
        var res = params[0].name;
        res += " Open: " + params[0].value[0] +
        " | High: " + params[0].value[3];
        res += " | Close: " + params[0].value[1] +
        " | Low: " + params[0].value[2];
        return res;
}'))

If you don't want to re-install recharts, you can simply modify the object g in low-level manner:

g$x$tooltip$formatter <- JS(...)

@miluylin commented on Thu Jun 15 2017

非常感激. Thank you

madlogos / recharts

In K chart, tooltip always shows the same format even modified the setting in formatter #15