How to render chart area without border in ASP.NET MVC Chart?
Essential Chart renders the chart area with border by default. Chart area border is represented by lines at four sides (left, right, top and bottom) of the chart area. The Border property in ChartArea is used to customize border lines in the chart area.
You can hide the chart area border by setting transparent color to the Color property of the chart area border. The Border property also provides options to customize the width and opacity of the lines representing the chart area border.
Setting transparent color only hides the border lines of the chart area, but still axis lines are visible in the chart area. Remove the axis lines to display the Chart without any lines at the left and bottom border of the chart area.
CSHTML
@(Html.EJ().Chart("container") .ChartArea(area=> area.Border(border=> border.Color("transparent"))) . . . . . . . . . . . . . . )
Chart with border
The following screenshot displays the Chart with red color border having 3 pixel width.
Figure 1: Chart with red color border having 3 pixel width
Chart area without border
The following screenshot displays the Chart with hidden (transparent) border. After removing the border, axes lines are visible at the left and bottom sides of the chart area. Disable the axis lines of the horizontal axis (primary X axis) and the vertical axis (primary Y axis) to remove the axis lines at the bottom and left side of the chart area.
Figure 2: Chart without border
Chart without border and axis lines
The following screenshot displays the Chart without border and axis lines.
Figure 3: Chart without border and axis lines