RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/PieChart/Point_Labels/Overview/ below:

Vue PieChart - Overview | Vue Documentation

Vue PieChart - Overview

Each series point can be accompanied with a label that displays the point's value or custom data.

To configure point labels, use the label object. You can declare it as follows.

jQuery

$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        series: [{
            label: {
                // Settings for all point labels of an individual series
            }
        }, {
            // ...  
        }],
        commonSeriesSettings: {
            label: {
                // Settings for all point labels in the PieChart
            }
        }
    });
});

Angular

<dx-pie-chart ... >
    <dxi-series>
        <dxo-label ... >
            <!-- Settings for all point labels of an individual series -->
        </dxo-label>
    </dxi-series>
    <dxo-common-series-settings ... >
        <dxo-label ... >
            <!-- Settings for all point labels in the PieChart -->
        </dxo-label>
    </dxo-common-series-settings>
</dx-pie-chart>

import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})

Vue

<template> 
    <DxPieChart ... >
        <DxSeries>
            <DxLabel ... >
                <!-- Settings for all point labels of an individual series -->
            </DxLabel>
        </DxSeries>
        <DxCommonSeriesSettings ... >
            <DxLabel ... >
                <!-- Settings for all point labels in the PieChart -->
            </DxLabel>
        </DxCommonSeriesSettings>
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxSeries,
    DxCommonSeriesSettings,
    DxLabel
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxSeries,
        DxCommonSeriesSettings,
        DxLabel
    }
}
</script>

React

import React from 'react';
import PieChart, {
    Series,
    CommonSeriesSettings,
    Label
} from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Series>
                    <Label ... >
                        {/* Settings for all point labels of an individual series */}
                    </Label>
                </Series>
                <CommonSeriesSettings ... >
                    <Label ... >
                        {/* Settings for all point labels in the PieChart */}
                    </Label>
                </CommonSeriesSettings>
            </PieChart>
        );
    }
}

Point labels are not visible by default. To make them visible, assign true to the label.visible property. With this configuration, point labels are displayed detached from their respective series points. You can make the connection between labels and points more evident by making label connectors visible. For this purpose, assign true to the label.connector.visible property.

jQuery

$(function() {
    $("#pieChartContainer").dxPieChart({
        // ...
        series: {
            label: {
                visible: true,
                connector: {
                    visible: true
                }
            }
        }
    });
});

Angular

<dx-pie-chart ... >
    <dxi-series>
        <dxo-label [visible]="true">
            <dxo-connector [visible]="true"></dxo-connector>
        </dxo-label>
    </dxi-series>
</dx-pie-chart>

import { DxPieChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPieChartModule
    ],
    // ...
})

Vue

<template> 
    <DxPieChart ... >
        <DxSeries>
            <DxLabel :visible="true">
                <DxConnector :visible="true"/>
            </DxLabel>
        </DxSeries>
    </DxPieChart>
</template>

<script>
import DxPieChart, {
    DxSeries,
    DxLabel,
    DxConnector
} from 'devextreme-vue/pie-chart';

export default {
    components: {
        DxPieChart,
        DxSeries,
        DxLabel,
        DxConnector
    }
}
</script>

React

import React from 'react';
import PieChart, {
    Series,
    Label,
    Connector
} from 'devextreme-react/pie-chart';

class App extends React.Component {
    render() {
        return (
            <PieChart ... >
                <Series>
                    <Label visible={true}>
                        <Connector visible={true} />
                    </Label>
                </Series>
            </PieChart>
        );
    }
}

For details on other properties of point labels, refer to the label section of the API reference and to other topics in this section.