Setting tooltip format differently to Axis Label

We are currently setting our X Axis labelFormat to "MMM" whnen we are displaying data across 12 months or more and we are grouping the Interval into every 2 Months.

It works well and gives us a usable X Axis. Howevr the default tooltip is taking it's formatting for the value plotted on the X -Axis from the X Axis label. It would be much better if we could display the a more specfic format such as "dd MMM yyyy" in the tooltip. How can we do that?

Here is our chart markup

<ejs-chart id="chart">
    <e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>
    <e-chart-crosshairsettings enable="true" lineType="Vertical"></e-chart-crosshairsettings>
    <e-chart-primaryxaxis valueType="Double">
    </e-chart-primaryxaxis>
    <e-chart-primaryxaxis valueType="DateTime" interval="@Model.DateTimeAxisIntervalGrouping" intervalType="@Model.DateTimeAxisInterval" labelFormat="@Model.DateTimeAxisDateFormat" minimum="@Model.DateFrom" maximum="@Model.DateTo"></e-chart-primaryxaxis>
    <e-series-collection>
        <e-series dataSource="@Model.Observations" xName="Date" yName="FEV1" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
            <e-series-marker visible="true" height="10" width="10"></e-series-marker>
        </e-series>
    </e-series-collection>
</ejs-chart>

1 Reply 1 reply marked as answer

DG Durga Gopalakrishnan Syncfusion Team January 27, 2021 02:28 PM UTC

Hi Pat,

We have analyzed your query with attached code snippet. As of now, we don't have format support for tooltip as per your scenario. In tooltip format property, we can able to display only x value, y value and series name. We suggest you specify labelFormat and dd MM yyyy for x axis and customize its label using axisLabelRender event. We have prepared sample and attached for your reference.

<ejs-chart id="chart" axisLabelRender="onAxisLabelRender">
</ejs-chart>
<script>
    function onAxisLabelRender(args) {
        if (args.axis.name == "primaryXAxis")
            args.text = args.text.split(" ")[1];        
    }
</script>


 
Please revert us if you have any concerns 

 
Regards, 
Durga G 


Marked as answer
Loader.
Up arrow icon