1. Home
  2. Forum
  3. Blazor
  4. SfCharts - Centered, rotated pseudo data labels

SfCharts - Centered, rotated pseudo data labels

Hi there,

imagine a simple chart that uses some stripes to indicate time areas (green).
In addition imagine a simple helper line chart (blue) with some points on the x-axes (y-value=0)  to indicate the date-limits of the chart stripe.
No problem so far.

How can we add data labels (e.g. strings) that are rotated 45° (-45°) and aligned to the center of it's marker dot?

Tried a data label template, didn't get it working like this (photoshop mockup): 
 

Any idea?

Cheers,
Volker

3 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team April 26, 2021 11:47 AM UTC

Hi Volker, 
  
Please find the response for chart related queries. 
  
Query #1: How can we add data labels (e.g. strings) that are rotated 45° (-45°)? 
  
Based on the provided details we would like to let you know that we can achieve your requirement using Name property in the datalabel and also it is not possible to customize the data label angle individually. Hence we suggest you to use RangePadding property in the primaryXAxis as Additional to overcome the data label cropping issue. Please find the below sample, code snippet for your reference. If still this is not your exact requirement. Kindly revert us with more information which will be helpful for further analysis and provide you solution sooner. 
  
  
Code Snippet: 
// add your additional code here 
  
    <ChartPrimaryXAxis RangePadding="ChartRangePadding.Additional" LabelFormat="dd.MM.yyyy" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"> 
        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines> 
        <ChartStriplines> 
            <ChartStripline Start="new DateTime(2021, 3, 2)" End=" new DateTime(2021, 4, 4)" Color="lightgreen" Visible="true"> 
                <ChartStriplineBorder Width="0"></ChartStriplineBorder> 
            </ChartStripline> 
        </ChartStriplines> 
    </ChartPrimaryXAxis> 
<ChartSeriesCollection> 
        <ChartSeries Name="Autos & Light Trucks" Type="ChartSeriesType.Line" DataSource="PollutionReports" XName="Period" YName="PollutionRate2" Width="2"> 
            <ChartMarker Visible="true"> 
                <ChartDataLabel Visible="true" Name="text" EnableRotation="true" Alignment="Alignment.Center" Angle="-45" Position="LabelPosition.Outer"> 
                </ChartDataLabel> 
            </ChartMarker> 
        </ChartSeries> 
    </ChartSeriesCollection> 
// add your additional code here 
  
@code{ 
    public List<StripLineData> PollutionReports { get; set; } = new List<StripLineData> 
{ 
        new StripLineData { Period = new DateTime(2021, 3, 1), PollutionRate1 = 16500, PollutionRate2 = 0, text= "Start engines" }, 
        new StripLineData { Period = new DateTime(2021, 4, 2), PollutionRate1 = 16000, PollutionRate2 = 0, text= "Ignition" }, 
        new StripLineData { Period = new DateTime(2021, 5, 3), PollutionRate1 = 15400, PollutionRate2 = 0, text= "Rotate" }, 
        new StripLineData { Period = new DateTime(2021, 7, 6), PollutionRate1 = 12800, PollutionRate2 = 0, text= "Touch-down" } 
    }; 
    public class StripLineData 
    { 
        public DateTime Period { get; set; } 
        public double PollutionRate1 { get; set; } 
        public double PollutionRate2 { get; set; } 
        public string text { get; set; } 
    } 
  
} 
  
Query #2: Data label aligned to the center of it's marker dot 
  
By default the text-anchor value of the data label will be set as middle. As of now there are no direct support to customize the text-anchor. Hence we suggest you to use below solution to achieve your requirement. Please find the sample, code snippet and screenshot below. 
  
  
Code snippet: 
// add your additional code here 
  
<SfChart ID="Chart" Title="World Pollution Report"> 
    // add your additional code here 
</SfChart> 
<style> 
    #Chart_Series_0_Point_0_Text_0 { 
        text-anchor: start !important 
    } 
    #Chart_Series_0_Point_1_Text_1 { 
        text-anchor: start !important 
    } 
    #Chart_Series_0_Point_2_Text_2 { 
        text-anchor: start !important 
    } 
    #Chart_Series_0_Point_3_Text_3 { 
        text-anchor: start !important; 
    } 
</style> 
  
// add your additional code here 
  
Screenshot: 
 
  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


Marked as answer
VO Volker April 26, 2021 01:13 PM UTC

Hi Srihari,

thank you for this solution path. Will adapt it in the project.
Hope this work-around will not get broken in future releases.

Cheers from Graz/Austria,
Volker

SM Srihari Muthukaruppan Syncfusion Team April 27, 2021 07:04 AM UTC

Hi Volker, 
 
Most welcome. 
 
We will make sure this won’t be broken in future releases. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   
   
Thanks,   
Srihari 


Loader.
Up arrow icon