# OutLabels Plugin

```javascript
var data = {
	type: 'pie',
	data: {
		labels: ["Red",
		"Green",
		"Yellow"],
	datasets: [{
		data: [300, 50, 100],
		backgroundColor: [
                      "#F7464A",
		      "#46BFBD",
		      "#FDB45C"],
		hoverBackgroundColor: [
                      "#FF5A5E",
		      "#5AD3D1",
		      "#FFC870"]
		}]
	}
}

var options = {
	responsive: true,
	maintainAspectRatio: false,
	layout: {
		padding: 10
	},
	plugins: {
		legend: {
			display: false
		},
		outlabels: {
			text: "%l (%p)",
			textAlign: "center",
			font: {
				resizable: true,
				minSize: 18,
				maxSize: 25
			}
		}
	}
}

//Initialize the chart by using setData
elements.chart.setData(data);
//Initialize additional options for outlabels plugin
elements.chart.setOptions(options);
```

## Options

```javascript
options.plugins.outlabels = {
    backgroundColor: "#8C1DFF", // Background color of Label
    borderColor: "#001BFF", // Border color of Label
    borderRadius: 17, // Border radius of Label
    borderWidth: 10, // Thickness of border
    color: 'white', // Font color
    display: true,
    lineWidth: 10, // Thickness of line between chart arc and Label
    padding: 17,
    stretch: 100, // The length between chart arc and Label
    text: "%l (%p)",
    textAlign: "center"
}
```

![props](/files/1ZA4fI79UbRVPmwXHABO)

## Text Options

Label's content can be controlled by changing the text option's value. Labels can be displayed on multiple lines by using the newline character (\n) between each line.

The space between each line can be adjusted using the font.lineHeight option.

Following scopes will be replaced automatically:

```
%l: will be replaced by Label of the data
%p: will be replaced by Percent of the data
%v: will be replaced by Value of the data
\n: will be replaced by New Line
```

```javascript
//Example
options.plugins.outlabels: {
    text: '%l PER => %p \n VAL => %v'
}
```

![label](/files/ILpkrJyABFBfIIfc1PjM)

\*Note that this plugin will not work when used along side data labels plugin (Use one or the other)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/guides/develop/application-design/ui-components/visualization/svychartjs/outlabels-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.