Replace rectangles in tooltip with circle

[singhrasster]

I need to change the rectangular color boxes in the tooltip to circular with a size I want. Since this is not possible using the custom tooltip properties, and if this is not a feature you plan to add, are there any pointers you can give on how I can modify the draw function to achieve this? Will it be too complex?

In file Chart.bundle.js,

Is the section of code inside
if (drawColorBoxes) {
..
..
}

all that need to be modified or it will be more than that? It seemed like fillRect is one of the things that will need to be replaced with something that draws a circle instead. I played a bit with it but couldn't get it working. If this task is simple enough to provide some support/pointers, please let me know. That will be useful for us.

[potatopeelings]

I presume you meant the callbacks when you said custom tooltips. The custom property of tooltips allows you full control over the tooltip element and you can do pretty much anything.

For instance, for line charts, you can adapt https://github.com/chartjs/Chart.js/blob/master/samples/tooltips/line-customTooltips.html like so https://jsfiddle.net/djgLw47L/ (all I did was add border-radius: 5px; to .chartjs-tooltip-key)

Cheers!

[etimberg]

@singhrasster that's the only place you're going to need to change the drawing code. You can also use the html tooltips as @potatopeelings suggested 😄

[Moghul]

You can make a custom tooltip and assign a css class to it where height equals width, and the border radius is high enough that it's a circle.

You can probably even implement it with dynamic sizes.

[singhrasster]

Thank you all for your answers. I am using Chart.js with an app that uses Angular 2. So, its all typescript code for me. I am using the following to set options for the bar chart:

public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true,
paddingLeft:2,
tooltips: {
mode: 'index',
custom: function(tooltip) {
if (!tooltip) {
return;
}
....
},
callbacks {
.....
}
}
}

Can I tweak any of this to replace rectangle with circles?

I am using ng2 charts directive so my html looks like:

<canvas baseChart"
[datasets]="barChartData"
[labels]="barChartLabels"
[options]="barChartOptions"
[colors]="chartColors"
[legend]="barChartLegend"
[chartType]="barChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)">

Right now, I am not very clear on how to use
.chartjs-tooltip-key {
border-radius: 5px;
}

in my case.

Or, how to create a custom tooltip and assign a css class to it for my case.

[Moghul]

In order to make the tooltip round, set its width, height, and border radius to the same value.

So,
.chartjs-tooltip-key {
border-radius: 5px;
height : 5px;
width : 5px
}

Will make it fully round. You can then adjust the text stiling to sit right in the middle of the tooltip with another class.

You can find examples of tooltips here https://github.com/chartjs/Chart.js/tree/master/samples/tooltips

[singhrasster]

I checked out the sample and since its all Javascript, the customTooltips variable is also a JS variable:

var customTooltips = function(tooltip) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
..
..
}

But, I am using Angular 2 where I am creating chart and settings all its options in a Typescript class. Below is the Typescript code where I am setting options:
public barChartOptions:any = {
tooltips: {
xPadding: 12,
yPadding: 12,
mode: 'index',
custom:
},
},
};

So, my question is how would I use the customTooltips JS variable (as created in your samples) in my Typescript code to set this custom tooltip? Is that possible? Let me know if I need to explain my question more.

[potatopeelings]

@singhrasster - TypeScript accepts native JavaScript, so you should be able to just pop in the same code and the CSS rule (I don't know enough of Angular2 to say which is the right place for it though) and make it work.

If it doesn't, can you set up a TypeScript CodePen with your setup (Angular2, ng2charts, Chart.js)?

[etimberg]

Closing as answered

[jfoclpf]

@potatopeelings
I tried as you said, but it gets a bit messy!

It would be much simpler to simply have an extra option in tooltip options

Something like:

pointerStyle | String | 'rectangular' or 'circular'

and btw, if one would like in css to convert a square to circle one should use:

border-radius: 50%;

Just a suggestion 😃