Configuration title

Specifies a title for the chart.

Type: Object|String

Use this property to set the text to be displayed as a chart title. If you need to specify the title's position on the chart, assign an object to the title property with the required title options specified. In this instance, set the title's text using the text property. When a text is not specified for a title, the widget is displayed without a title. To learn more on the title and its options, refer to the Chart Title topic.

Show Example:
jQuery

In the example below, the polar chart's title text is assigned directly to the title field.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: 0,	  val: 0 },
               	  { arg: 720, val: 2 }];

$(function () {
	$("#chartContainer").dxPolarChart({
		dataSource: dataSource,
		series: [{ type: "line", valueField: "val" }],
		commonSeriesSettings: { closed: false },
		argumentAxis: {
		    inverted: true,
		    startAngle: 90,
		    tickInterval: 45,
		    period: 360
		},
		valueAxis:{
		    tickInterval: 0.5,
		},
		title: 'Archimedean Spiral',
		legend: { visible: false }
	});
});

font

Specifies font options for the title.

Type: Object

horizontalAlignment

Specifies the title's horizontal position in the chart.

Type: String
Default Value: 'center'
Accepted Values: 'right' | 'center' | 'left'

To set the title's vertical position, use the verticalAlignment option.

Show Example:
jQuery

In this example, use the drop-down menu below to change the position of the polar chart title in a horizontal direction.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Title Horizontal Alignment:
    <select id="dropdownListSelector">
        <option value="center">center</option>
        <option value="right">right</option>
        <option value="left">left</option>
    </select>
</div>
var dataSource = [{ arg: 0,   val: 0 },
               	  { arg: 720, val: 2 }];

$(function () {
	$("#chartContainer").dxPolarChart({
		dataSource: dataSource,
		series: [{ type: "line", valueField: "val" }],
		commonSeriesSettings: { closed: false },
		argumentAxis: {
		    inverted: true,
		    startAngle: 90,
		    tickInterval: 45,
		    period: 360
		},
		valueAxis: {
		    tickInterval: 0.5,
		},
		title: {
			text: 'Archimedean Spiral',
			horizontalAlignment: 'center'
		},
		legend: { visible: false }
	});

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxPolarChart('instance');
        chart.option({
            title: { horizontalAlignment: this.value }
        });
    });
});

margin

Specifies the distance between the title and surrounding chart elements in pixels.

Type: Number|Object
Default Value: 10

Use the fields of the margin object to set the required values for the left, right, top and bottom title margins separately. If you require title margins to be equal, assign a numeric value to the margin option.

PolarChartMargin ChartJS

placeholderSize

Specifies the height of the space reserved for the title.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the placeholderSize option of the polar chart title is set to 60. You can change this value using the slider below to see the result.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="sliderContainer" style="height:60px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Placeholder Size: <div style="display: inline-block;" id="sliderValue">60</div>
	<div id="slider"></div>
</div>
var dataSource = [{ arg: 0,   val: 0 },
               	  { arg: 720, val: 2 }];

$(function () {
	$("#chartContainer").dxPolarChart({
		dataSource: dataSource,
		series: [{ type: "line", valueField: "val" }],
		commonSeriesSettings: { closed: false },
		argumentAxis: {
		    inverted: true,
		    startAngle: 90,
		    tickInterval: 45,
		    period: 360
		},
		valueAxis: {
		    tickInterval: 0.5,
		},
		title: {
			text: 'Archimedean Spiral',
			horizontalAlignment: 'center',
			placeholderSize: 60
		},
		legend: { visible: false }
	});

	$("#slider").dxSlider({
		min: 10,
		max: 100,
		value: 60,
		onValueChanged: function (value) {
			$('#sliderValue').html(value.value);
			var chart = $('#chartContainer').dxPolarChart('instance');
			chart.option({
				title: { placeholderSize: value.value }
			});
		}
	});
});

text

Specifies a text for the chart's title.

Type: String
Default Value: null

If you don't need to specify title options other than text, assign the text to the title property directly.

When a text is not specified for a title, the widget is displayed without a title.

Show Example:
jQuery

In the example below, the polar chart's title text is specified using the text field of the title option.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
var dataSource = [{ arg: 0, val: 0 },
               	  { arg: 720, val: 2 }];


$(function () {
	$("#chartContainer").dxPolarChart({
		dataSource: dataSource,
		series: [{ type: "line", valueField: "val" }],
		commonSeriesSettings: { closed: false },
		argumentAxis: {
		    inverted: true,
		    startAngle: 90,
		    tickInterval: 45,
		    period: 360
		},
		valueAxis: {
		    tickInterval: 0.5,
		},
		title: {
		    text: 'Archimedean Spiral',
		},
		legend: { visible: false }
	});
});

verticalAlignment

Specifies a title's position on the chart in the vertical direction.

Type: String
Default Value: 'top'
Accepted Values: 'top' | 'bottom'

To set the title's position in the horizontal direction, use the horizontalAlignment option.

Show Example:
jQuery

In this example, use the drop-down menu below to change the position of the polar chart title in a vertical direction.

<div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
<div id="selectContainer" style="height:40px;width:300px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Title Vertical Alignment:
    <select id="dropdownListSelector">
        <option value="top">top</option>
        <option value="bottom">bottom</option>
    </select>
</div>
var dataSource = [{ arg: 0,   val: 0 },
               	  { arg: 720, val: 2 }];

$(function () {
	$("#chartContainer").dxPolarChart({
		dataSource: dataSource,
		series: [{ type: "line", valueField: "val" }],
		commonSeriesSettings: { closed: false },
		argumentAxis: {
		    inverted: true,
		    startAngle: 90,
		    tickInterval: 45,
		    period: 360
		},
		valueAxis: {
		    tickInterval: 0.5,
		},
		title: {
			text: 'Archimedean Spiral',
			horizontalAlignment: 'center',
			verticalAlignment: 'top'
		},
		legend: { visible: false }
	});

    $('#dropdownListSelector').change(function () {
        var chart = $('#chartContainer').dxPolarChart('instance');
        chart.option({
            title: { verticalAlignment: this.value }
        });
    });
});