Custom Html ToolTip #1711
Comments
There're 2 ways to implement custom HTML:
Checkout the examples from the API doc. |
|
Thanks for your quick response. our requirement is like below
"tooltip":{
"format":{},
contents: (d, defaultTitleFormat, defaultValueFormat, color) => {
return this.GetTooptipData(chart,d);
}
}
// Function to get data from API using promise
private GetTooptipData(chart,d)
{
return new Promise(resolve => {
**API CAll to featch Html**
resolve(this.tooltipDataValue); // it will resolve Html which get from API response
}
});
}i am getting error with this implementation like " Type '(this: Chart, d: any, defaultTitleFormat: string, defaultValueFormat: string, color: any) => Promise' is not assignable to type '((this: Chart, data: any, defaultTitleFormat: string, defaultValueFormat: string, color: any) => string) | { bindto?: string | HTMLElement; template?: string; text?: { ...; }; }'." we were using same implementation with C3.js chart before which was working perfectly fine but not will billboard.js , please suggest a way to achieve this THANKS in ADVANCE ..... |
|
The tooltip option isn't designed for async operation. In your use case, need to approach differently combining the tooltip event option. For example you can call whatever async call within bb.generate({
data: {
columns: [
["data1", 300, 350, 300, 0, 0, 0],
["data2", 130, 100, 140, 200, 150, 50]
],
types: {
data1: "area",
data2: "area-spline"
}
},
tooltip: {
contents: () => "",
onshow: function(data) {
GetTooptipData().then(msg => {
// make tooltip html here, from the returned promise result
this.$.tooltip.html(`<h1>${msg}</h1>`);
});
}
}
});
function GetTooptipData() {
return new Promise(resolve => {
resolve("my tooltip");
});
} |
|
Thanks a lot , it works one last query for same
I got one onclick function but not sure weather it will allow to decide tooltip display type
|
|
HI Any update please? |
|
One of the approach you can do is add some flag variable to determine tooltip showing for react on mouseover event or click event. And then set
// set true for 'over', false for 'click'
const isTooltipByOver = true;
const chart = bb.generate({
data: {
columns: [
["data1", 300, 350, 300, 0, 0, 0],
["data2", 130, 100, 140, 200, 150, 50]
],
types: {
data1: "area",
data2: "area-spline"
},
onclick: !isTooltipByOver && function(d, element) {
GetTooptipData();
}
},
tooltip: {
contents: () => "",
onshow: isTooltipByOver && function(data) {
GetTooptipData();
}
}
});
function GetTooptipData() {
return new Promise(resolve => {
resolve("my tooltip");
}).then(msg => {
// make tooltip html here, from the returned promise result
chart.$.tooltip.html(`<h1>${msg}</h1>`);
});
} |
|
HI Thanks for your response , it is working on stackbiz but not while I put it into my code , I am getting below error.
There is change in "Data" => types ` "types":{"Series 1":line(),"Series 2":line()}, If i Pass types: { I am getting below error
I am using angular for this and below is package.json ` |
|
if you're using in ESM environment, you need to import shape modules. // UMD
data: {
types: {
data1: "bar",
data2: "spline"
}
}
// Generate chart by importing ESM
// Import types to be used only, where this will make smaller bundle size.
import bb, {
area,
areaLineRange,
areaSpline,
areaSplineRange,
areaStep,
bar,
bubble,
donut,
gauge,
line,
pie,
radar,
scatter,
spline,
step
}
bb.generate({
...,
data: {
types: {
data1: bar(),
data1: spline()
}
}
});Checkout the API doc |
we were doing customizationn in C3 to give custom color ,size to point like below
here point pattern is series wise , how we can give it at point level? |
|
HI any update please ? |
|
if you need to customize data points, there're 2 ways on doing that
const chart = bb.generate(...);
chart.$.circles.each(function() {
// 'this' will refer data point element
this.style.stroke = "red";
this.style.strokeWidth = "red";
});
circle.bb-circle {
stroke: red !important;
fill: red !important;
}and plz, read the doc API or the example code for the detail customization. |
|
HI @netil my question is "Can't we achieve this without customization?"
we are thinking to move to billboard to avoid customization we did in C3 if billboard allows above features |
|
|
Thanks :) |
|
HI @netil
|
No, custom point shape is applied to all data series, not for point by point. for this |
|
|
Description
Custom tooltip using Html template
Steps to check or reproduce
I need to use custom html template in Tooltip which i will get from API which looks like below
'<style>'+ ' .Status_Black {'+ ' color: black;'+ ' font-family: Arial;'+ ' }'+ ' .white-bg{'+ ' background: white;'+ ' }'+ ''+ ' .Status_Red {'+ ' color: red;'+ ' font-family: Arial;'+ ' font-weight: bold;'+ ' }'+ ''+ ' .Status_Orange {'+ ' color: #FFA500;'+ ' font-family: Arial;'+ ' font-weight: bold;'+ ' }'+ ''+ ' .ColHeader {'+ ' color: black;'+ ' font-family: Arial;'+ ' font-weight: bold;'+ ' width: 25%;'+ ' }'+ ''+ ' .MeasureTable {'+ ' width: 250px;'+ ' background-color: gree;'+ ' margin: 0;'+ ' padding: 0;'+ ' border: 0;'+ ' }'+ ''+ ' .ColLeft {'+ ' text-align: left;'+ ' }'+ ''+ ' .ColRight {'+ ' text-align: right;'+ ' }'+ ''+ ' .ColCenter {'+ ' text-align: center;'+ ' }'+ ' .table{'+ ' border-collapse: collapse;'+ ' border: 1px solid black;'+ ' }'+ ' tr, td, th{'+ ' border: 1px solid black;'+ ' }'+ ' .table-header{'+ ' background: white;'+ ' }'+ ' '+ ' </style><div class="Status_Black ColLeft white-bg" bgcolor="white"> Date my wish ti show<mat-dialog-actions><button mat-button mat-dialog-close>Cancel</button><button id="modalBtnId" style="position: absolute;right: 12px;top: 4px;" class="filled-button mat-icon-button" mat-dialog-close><mat-icon class="mat-icon material-icons" style="line-height: 30px;" role="img" aria-hidden="true" onclick="closeTooltip()">close</mat-icon></button></mat-dialog-actions><br/> '+ ' Operator Skippy <br/> '+ ' <div class="ScrollTable"> '+ ' <table class="MeasureTable"><thead><tr><th class="ColHeader ColCenter">Head</th><th class="ColHeader ColCenter">Sample</th><th class="ColHeader ColCenter">Reading</th><th class="ColHeader ColCenter">Value</th></tr></thead><tfoot><tr><th></th><th></th><th></th><th></th></tr></tfoot><tbody><tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight"> 1</td><td class="Status_Black ColRight">36.78</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Black ColRight"> 1</td><td class="Status_Red ColRight"> 2</td><td class="Status_Black ColRight">26.93</td></tr><td class="Status_Black ColLeft"> A</td><td class="Status_Red ColRight"> 1</td><td class="Status_Black ColRight"> 3</td><td class="Status_Black ColRight">12.13</td></tr><td class="Status_Orange ColLeft"> A</td><td class="Status_Orange ColRight"> 1</td><td class="Status_Black ColRight"> 4</td><td class="Status_Black ColRight">37.47</td></tr></tbody></table></div></div>';Problems
{=CLASS_TOOLTIP} and same for style
Is there any way that billboard accept Html Directly witout any modification.
The text was updated successfully, but these errors were encountered: