Change data labels' position

The following command makes it possible to change the position of a chart's data labels.

<Cmd case="SkabelonDesign.CorporateCharts3:DatalabelPosition" position="xx" lineBasedPosition="xx"/>

Parameters

Position

Defines the position of the chart's data labels and its values can be InsideEnd, Center, InsideBase or OutsideEnd. For Line, Scatter, or Radar charts, the position of the data labels should be defined in the parameter below.

lineBasedPosition

Defines the position of the data labels for line-based charts (Line, Scatter, Radar). Here, the values can be Below, Center or Above. 

It is also possible, but not necessary, to define the colors of the data labels using the following parameters:

colorsPath

This is where the color scheme is referenced. It ensures that it is possible to define the keys from the corresponding .json file that contains the color scheme.

colorRef

Defines which color from the color scheme should be used for the data labels.

Both of these parameters are optional, but if one is used then the other is needed for the command to work. Thus, if the color of the data labels needs to be adjusted with this command, both parameters should be used.

It is also possible to remove data labels without changing anything in the chart's design, using the following command:

<Cmd case="SkabelonDesign.CorporateCharts3:RemoveDatalabels"/>

Example from client solution

<Button label="SkabelonDesign.CorporateCharts3:cc_datalabels_insideend" icon="ChartDataLabel" enable="BaseExtensions:any" enable-1-type="ChartSelected">
    <Cmd case="SkabelonDesign.CorporateCharts3:Reapply"/>
    <Cmd case="SkabelonDesign.CorporateCharts3:DatalabelPosition" position="InsideEnd" lineBasedPosition="Below"/>
</Button>

 

<Button label="SkabelonDesign.CorporateCharts3:cc_datalabels_center" icon="ChartDataLabel" enable="BaseExtensions:any" enable-1-type="ChartSelected">
    <Cmd case="SkabelonDesign.CorporateCharts3:Reapply"/>
    <Cmd case="SkabelonDesign.CorporateCharts3:DatalabelPosition" position="Center" lineBasedPosition="Center"/>
</Button>




<Button label="SkabelonDesign.CorporateCharts3:cc_datalabels_base" icon="ChartDataLabel" enable="BaseExtensions:any" enable-1-type="ChartSelected">
    <Cmd case="SkabelonDesign.CorporateCharts3:Reapply"/>
    <Cmd case="SkabelonDesign.CorporateCharts3:DatalabelPosition" position="InsideBase" lineBasedPosition="Below"/>
</Button>

 

<Button label="SkabelonDesign.CorporateCharts3:cc_datalabels_outside" icon="ChartDataLabel" enable="BaseExtensions:any" enable-1-type="ChartSelected">
    <Cmd case="SkabelonDesign.CorporateCharts3:DatalabelPosition" position="OutsideEnd" lineBasedPosition="Above" colorsPath="MainColors.json" colorRef="MidGrey"/>
</Button>

<Inject>
    <menuSeparator id="separator" />
</Inject>

<Button label="SkabelonDesign.CorporateCharts3:cc_datalabels_toggle" icon="Delete" enable="BaseExtensions:any" enable-1-type="ChartSelected">
    <Cmd case="SkabelonDesign.CorporateCharts3:RemoveDatalabels"/>
</Button>

</DynamicMenu>

In this case the command SkabelonDesign.CorporateCharts3:Reapply is used to reapply the correct colors for the chart's series and data labels. This is helpful in cases where one of the data label positions needs to feature a different data label color (like in this client's case, where the OutsideEnd labels need to be MidGrey, which is not how they are defined in the main chart configuration).