Pie Chart with long tool tip description

[rhcormier]

Hi there – I’m using the Pie Chart With Additional Customization. I’m looking to add a unique long text description as a tool tip and the percentage value for each y value.

For example Income Taxes: 3.8%

35.8%
This is the total of income taxes you are paying blah blah blah blah

[Vishwas R]

@rhcormier

You can use toolTip.content to achieve this.

[rhcormier]

Yes I am using the toolTip, I was able to figure it out using the custom property (below).

My follow up question is how do I size the tool tip with a maximum width? Currently the text and tool tip box overlaps using the entire browser width (and in some cases more).

dataPoints: [

{ y: 25.4, indexLabel: “Income Taxes:”, customPropperty: “Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ” },

[Ashish]

@rhcormier

You can add HTML tags to toolTip.content. Please refer to this jsfiddle where we have added div to toolTip.content with specific width and CSS customizations.

—
Ashish Khatri
Team CanvasJS

[rhcormier]

How do you alter the text font size and family for the indexLabel on the page (not tooltip)

Ie looking to update this with a different font type and size – legendText: “{indexLabel}”,

Richard

[Vishwas R]

Richard,

You can use indexLabelFontSize and indexLabelFontFamily at dataPoint level to show every indexLabel in different font-size and font-family.

—
Vishwas R
Team CanvasJS