styling charttooltip trackball
Hello,
I am trying to write a workaround to have the datamarkers show only when the user hovers over the point (so they are hidden until then). The problem is that there is some unexpected behavior that is happening in my current implementation, where the visibility property is being set dynamically I believe. The fill of the marker is not recognized, and the marker gets cut off near the ends of the line chart:
I wanted to check and see if there may be a better solution. Thank you for the assistance.
Hello,
I noticed the multicolored line example almost has what I need ( Blazor Charts Multi Colored Line Example - Syncfusion Demos ), and I only just realized now that the data point being visible on hover is because the tooltip component's shared property is set to true, so it's displaying the trackball.
The problem is the same when I adapt it to a single color line however:
The ellipse gets cut off at the end, and I'd like the trackball to be filled, instead of white. Here is the code I am using:
@page "/"
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor
@inject NavigationManager NavigationManager
<div class="control-section">
<SfChart Width="80%" Title="Inflation - Consumer Price" >
<ChartArea>
<ChartAreaBorder Width="0"></ChartAreaBorder>
</ChartArea>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
<ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
</ChartPrimaryXAxis>
<ChartPrimaryYAxis RangePadding="ChartRangePadding.None" Title="Particulate Matter(PM)" Minimum="20" Maximum="100">
<ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
<ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
</ChartPrimaryYAxis>
<ChartLegendSettings Visible="false"></ChartLegendSettings>
<ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
<ChartCrosshairSettings Enable="true" LineType="LineType.Vertical"></ChartCrosshairSettings>
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartData" Name="Rainfall" XName="Period" YName="RainfallInfo" PointColorMapping="PointColor" Width="1.5" Type="ChartSeriesType.MultiColoredLine">
<ChartMarker Visible="false" Fill="red"/>
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
</div>
@code{
public List
{
new LineChartData { Period = new DateTime(2005, 01, 01), RainfallInfo = 21,PointColor="red" },
new LineChartData { Period = new DateTime(2006, 01, 01), RainfallInfo = 24,PointColor="red" },
new LineChartData { Period = new DateTime(2007, 01, 01), RainfallInfo = 36,PointColor="red" },
new LineChartData { Period = new DateTime(2008, 01, 01), RainfallInfo = 38,PointColor="red" },
new LineChartData { Period = new DateTime(2009, 01, 01), RainfallInfo = 54,PointColor="red" },
new LineChartData { Period = new DateTime(2010, 01, 01), RainfallInfo = 57,PointColor="red" },
new LineChartData { Period = new DateTime(2011, 01, 01), RainfallInfo = 70,PointColor="red" }
};
public class LineChartData
{
public DateTime Period { get; set; }
public double RainfallInfo { get; set; }
public string PointColor { get; set; }
}
}
Hi, thank you for your response, the demo you provided has been helpful.
My requirements have changed slightly however. To clarify, I am using an older version, 18.3.0.53.
I'd like to be able to use a custom template, while hiding the markers but still leaving the trackball. Using the environment you provided, with the latest version of syncfusion gives me what I want with this snippet:
@{ var data = context as ChartTooltipInfo; }
However when I revert to using my older version, the trackball doesn't show up when i hover near a datapoint. Can you help confirm that this may be because I am using an older version?
*Also, within the tooltip template, is there a way to add back in the arrow that points out to the trackball from the tooltip?
Thank you,
John
