Search results

Tooltip

Tooltip for the accumulation chart can be enabled by using the Enable property.

default.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;

    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Tooltip

We can specify header for the tooltip using Header property.

header.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
        <AccumulationChartTooltipSettings Enable="true" Header="Pie Chart"></AccumulationChartTooltipSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;

    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Header

Format

By default, tooltip shows information about x and y value in points. In addition to that, you can show more information in tooltip. For example the format ${point.x} : <b>${point.y}%</b> shows series name and point x value.

format.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
        <AccumulationChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y}%</b>"></AccumulationChartTooltipSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;

    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Format

Customization

The Fill and Border properties are used to customize the background color and border of the tooltip respectively. The TextStyle property in the tooltip is used to customize the font of the tooltip text.

custom.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
        <AccumulationChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y}</b>" Fill="#7bb4eb"></AccumulationChartTooltipSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;

    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

Customization

Tooltip Text Mapping

By default, tooltip shows information of x and y value in points. You can show more information from datasource in tooltip by using the TooltipMappingName . You can use the ${point.tooltip} as place holders to display the specified tooltip content.

mapping.razor
<EjsAccumulationChart Title="Mobile Browser Statistics">
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"
                                     Name="Browser" TooltipMappingName="Browser">
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
  
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
  
        <AccumulationChartTooltipSettings Enable="true" Format="${point.tooltip}"></AccumulationChartTooltipSettings>
</EjsAccumulationChart>

@code{
    public class Statistics
    {
        public string Browser;
        public double Users;

    }

    public List<Statistics> StatisticsDetails = new List<Statistics> 
    {
        new Statistics { Browser = "Chrome", Users = 37 },
        new Statistics { Browser = "UC Browser", Users = 17 },
        new Statistics { Browser = "iPhone", Users = 19 },
        new Statistics { Browser = "Others", Users = 4  },
        new Statistics { Browser = "Opera", Users = 11 },
        new Statistics { Browser = "Android", Users = 12 },
    };
}

mapping