Juan_mejia Juan_mejia - 1 month ago 21
React JSX Question

C3JS JSX syntax on render for tooltip html

well i have a application when this use a dynamic tooltip, this have to change the design depending of the values on the graph, but add inner html into the content of the tooltip is being very hard to refactor because i have a lot of design for the tooltip into many conditions and variables

i tried importing a component but the content function expect only a string with the html

so i wondering if is possible to add jsx syntax or add a react component to render the html of tooltip into the content of c3

data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
},
axis: {
y: {
padding: {bottom: 0},
min: 0
},
x: {
padding: {left: 0},
min: 0,
show: false
}
},
tooltip: {
contents: function () {
// call a function that return a react component
}
}

Answer

You can use ReactDomServer.renderToString to render this https://www.npmjs.com/package/react-dom#react-domserver

However i am not sure if this a good solution, it was not designed for this purpose. (if you check console, you can see there still is an error).

Here is working fiddle of using React component in c3js tooltip. http://jsfiddle.net/uqh2679x/

But still you can achieve same thing using template literal: Working fiddle: http://jsfiddle.net/z7evqpnL/

tooltip: {
    contents: (data) => `
        <div class="tooltip">
            <div class="title">${customText}</div>
            <div>Data1: ${data[0].value}</div>
            <div>Data2: ${data[1].value}</div>
        </div>`
    }
}

When you use `` you can put variables inside the string like above ${variable}. Also you can break this string into multiple lines so it is more readable (it will also preserve all line breaks if you i.e. log it)