Custom Html ToolTip #1711

BhavikThakkar · 2020-10-06T09:35:47Z

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

Billboard is not accepting class similar as html , expecting in below format

{=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:

netil · 2020-10-07T01:30:33Z

Billboard is not accepting class similar as html , expecting in below format {=CLASS_TOOLTIP} and same for style

{=CLASS_TOOLTIP} is just a template syntax within the tooltip template string and it doesn't necessarily to be used always.
You can add whatever class you want to the template HTML.

There're 2 ways to implement custom HTML:

by returning final HTML from tooltip.contents function

  tooltip: {
      contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
          return ... // formatted html as you want
      }
  }

by specifying HTML template from tooltip.contents.template.

  tooltip: {
      contents: {
          template: '<ul class="my-class">{{' +
              '<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span><br>' +
              '<span style=color:{=COLOR}>{=NAME}</span></li>' +
          '}}</ul>'
      }
  }

Checkout the examples from the API doc.

https://naver.github.io/billboard.js/release/latest/doc/Options.html#.tooltip

BhavikThakkar · 2020-10-07T05:55:58Z

Thanks for your quick response.

our requirement is like below

ON chart point hover we need to open tooltip but we wants to display custom HTML in tooltip which we need to get from API response .
SO on hover we will need to make one API call to get Custom Html and to wait till API response we need to use Promise which also now allowed here in billboard.js tooltip , the way we are implementing here is

"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 .....

netil · 2020-10-08T07:00:05Z

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 tooltip.onshow option and make tooltip HTML string from the returned Promise call.

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");
  });
}

BhavikThakkar · 2020-10-08T12:56:32Z

Thanks a lot , it works one last query for same

we need to show tooltip on point as well
Tooltip will display either on Click or Hover - that also shall be base on API response ( API flag shall decide weather tooltip will display on Hover or click.

I got one onclick function but not sure weather it will allow to decide tooltip display type

BhavikThakkar · 2020-10-10T10:42:18Z

HI

Any update please?

netil · 2020-10-12T06:45:17Z

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 data.onclick option(data.onclick works when data points is clicked) value for click type and tooltip.onshow option value for over type.

Take the below example code as reference how to approach for your needs.

// 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>`);
	});
}

BhavikThakkar · 2020-10-12T14:23:28Z

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: {
data1: "area",
data2: "area-spline"
},

I am getting below error

I am using angular for this and below is package.json

{
  "name": "fuse",
  "version": "6.2.4",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json",
    "compodoc": "npx compodoc -p src/tsconfig.app.json"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.3",
    "@angular/animations": "6.0.9",
    "@angular/cdk": "6.3.3",
    "@angular/common": "6.0.9",
    "@angular/compiler": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/flex-layout": "6.0.0-beta.16",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/material": "6.3.3",
    "@angular/material-moment-adapter": "6.3.3",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/router": "6.0.9",
    "@ng-bootstrap/ng-bootstrap": "4.0.2",
    "@ngrx/effects": "6.0.1",
    "@ngrx/router-store": "6.0.1",
    "@ngrx/store": "6.0.1",
    "@ngrx/store-devtools": "6.0.1",
    "@ngx-translate/core": "10.0.2",
    "@ngx-translate/http-loader": "4.0.0",
    "@swimlane/dragula": "3.8.0",
    "@swimlane/ngx-charts": "8.1.0",
    "@swimlane/ngx-datatable": "13.0.1",
    "@swimlane/ngx-dnd": "4.0.0",
    "@types/c3": "0.6.0",
    "@types/d3": "5.0.0",
    "@types/d3-scale": "2.0.2",
    "@types/dragula": "2.1.34",
    "@types/prismjs": "1.9.0",
    "ag-grid": "18.1.2",
    "ag-grid-angular": "19.1.2",
    "ag-grid-community": "19.1.4",
    "angular-calendar": "0.25.2",
    "angular-in-memory-web-api": "0.6.0",
    "angular2-datetimepicker": "1.1.1",
    "billboard.js": "2.1.1",
    "c3": "0.6.6",
    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
    "d3": "5.7.0",
    "d3-scale": "2.1.2",
    "dom-to-image": "2.6.0",
    "flag-icon-css": "3.3.0",
    "hammerjs": "2.0.8",
    "jquery": "3.3.1",
    "lodash": "4.17.10",
    "moment": "2.22.2",
    "ng-drag-drop": "5.0.0",
    "ng-pick-datetime": "6.0.16",
    "ng2-charts": "1.6.0",
    "ngrx-store-freeze": "0.2.4",
    "ngx-clipboard": "11.1.9",
    "ngx-color-picker": "6.5.0",
    "ngx-cookie-service": "1.0.10",
    "ngx-daterangepicker-material": "1.2.4",
    "ngx-material-timepicker": "2.9.0",
    "ngx-toastr": "8.8.0",
    "perfect-scrollbar": "1.4.0",
    "primeicons": "1.0.0",
    "primeng": "7.1.1",
    "prismjs": "1.15.0",
    "rxjs": "6.2.1",
    "rxjs-compat": "6.2.1",
    "sweetalert2": "7.33.1",
    "ts-md5": "1.2.4",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.6.8",
    "@angular/cli": "6.0.8",
    "@angular/compiler-cli": "6.0.9",
    "@angular/language-service": "6.0.9",
    "@angularclass/hmr": "2.1.3",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/lodash": "4.14.111",
    "@types/node": "8.9.5",
    "codelyzer": "4.2.1",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.1",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "printd": "1.0.1",
    "protractor": "5.3.2",
    "ts-node": "5.0.1",
    "tslint": "5.9.1",
    "typescript": "2.7.2",
    "webpack-bundle-analyzer": "2.13.1"
  }
}

`

netil · 2020-10-13T00:17:43Z

if you're using in ESM environment, you need to import shape modules.
If you're using in UMD environment, you need to specify data types as string.

// 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

https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data%25E2%2580%25A4types

ThakkarKhushbu · 2020-10-14T09:48:16Z

we need to apply dynamic point color for line chart. is there any way to do so?

we were doing customizationn in C3 to give custom color ,size to point like below

var circleHtml = '<circle r=' + point.Point_Size + ' ' + 'style="fill:' + point.Color_Fill + ';stroke-width:' + point.Border_Width + ';stroke:' + point.Color_Point + '" cx=' + hx + ' cy="' + hy + '" />' + '<text x="' + hx + '"y="' + hy + '"font-size=' + point.Point_Size + ' fill=' + point.Color_Text + '> ' + point.Point_Code + '</text>';

we need all point shape diferrent in single series

here point pattern is series wise , how we can give it at point level?

BhavikThakkar · 2020-10-16T10:00:48Z

HI

any update please ?

netil · 2020-10-16T10:39:51Z

if you need to customize data points, there're 2 ways on doing that

instance.$.circles holds data points element reference.

const chart = bb.generate(...);

chart.$.circles.each(function() {
    // 'this' will refer data point element
    this.style.stroke = "red";
    this.style.strokeWidth = "red";
});

or set css rule for circles

circle.bb-circle {
   stroke: red !important;
   fill: red !important;
}

and plz, read the doc API or the example code for the detail customization.

BhavikThakkar · 2020-10-16T10:45:37Z

HI @netil

my question is "Can't we achieve this without customization?"

Custom Point Shapes
Different point shape for single series ?
same for legend symbol?

we are thinking to move to billboard to avoid customization we did in C3 if billboard allows above features

netil · 2020-10-19T02:07:00Z

Custom Point Shapes
checkout the demo:
https://naver.github.io/billboard.js/demo/#Point.CombinationPoints
Different point shape for single series ?
No, custom point shape is applied to all data series, not for point by point.
You can make to have each data points having different one, but need to do your own customization.
same for legend symbol?
checkout the demo:
https://naver.github.io/billboard.js/demo/#Legend.usePoint

BhavikThakkar · 2020-10-19T05:06:46Z

Thanks :)

BhavikThakkar · 2020-10-19T06:57:20Z

HI @netil
I made customization in points but after that click of data stop working

BhavikThakkar · 2020-10-19T07:04:06Z

Custom Point Shapes
checkout the demo:
https://naver.github.io/billboard.js/demo/#Point.CombinationPoints

Different point shape for single series ?
No, custom point shape is applied to all data series, not for point by point.
You can make to have each data points having different one, but need to do your own customization.

same for legend symbol?
checkout the demo:
https://naver.github.io/billboard.js/demo/#Legend.usePoint

No, custom point shape is applied to all data series, not for point by point.
You can make to have each data points having different one, but need to do your own customization.

for this

BhavikThakkar · 2020-10-19T07:09:25Z

single series with multiple point shape

netil added the question label Oct 7, 2020

netil closed this as completed Oct 19, 2020

BhavikThakkar mentioned this issue Oct 19, 2020

On making Point Custom Click Stop Works #1733

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Html ToolTip #1711

Custom Html ToolTip #1711

BhavikThakkar commented Oct 6, 2020

netil commented Oct 7, 2020

BhavikThakkar commented Oct 7, 2020 •

edited by netil

Loading

netil commented Oct 8, 2020

BhavikThakkar commented Oct 8, 2020

BhavikThakkar commented Oct 10, 2020

netil commented Oct 12, 2020

BhavikThakkar commented Oct 12, 2020

netil commented Oct 13, 2020

ThakkarKhushbu commented Oct 14, 2020 •

edited

Loading

BhavikThakkar commented Oct 16, 2020

netil commented Oct 16, 2020

BhavikThakkar commented Oct 16, 2020

netil commented Oct 19, 2020

BhavikThakkar commented Oct 19, 2020

BhavikThakkar commented Oct 19, 2020 •

edited

Loading

BhavikThakkar commented Oct 19, 2020

BhavikThakkar commented Oct 19, 2020

Custom Html ToolTip #1711

Custom Html ToolTip #1711

Comments

BhavikThakkar commented Oct 6, 2020

Description

Steps to check or reproduce

netil commented Oct 7, 2020

BhavikThakkar commented Oct 7, 2020 • edited by netil Loading

netil commented Oct 8, 2020

BhavikThakkar commented Oct 8, 2020

BhavikThakkar commented Oct 10, 2020

netil commented Oct 12, 2020

BhavikThakkar commented Oct 12, 2020

netil commented Oct 13, 2020

ThakkarKhushbu commented Oct 14, 2020 • edited Loading

BhavikThakkar commented Oct 16, 2020

netil commented Oct 16, 2020

BhavikThakkar commented Oct 16, 2020

netil commented Oct 19, 2020

BhavikThakkar commented Oct 19, 2020

BhavikThakkar commented Oct 19, 2020 • edited Loading

BhavikThakkar commented Oct 19, 2020

BhavikThakkar commented Oct 19, 2020

BhavikThakkar commented Oct 7, 2020 •

edited by netil

Loading

ThakkarKhushbu commented Oct 14, 2020 •

edited

Loading

BhavikThakkar commented Oct 19, 2020 •

edited

Loading