Strip lines
15 Mar 202224 minutes to read
EJ2 chart supports horizontal and vertical strip lines and customization of stripline in both orientation.
Horizontal Strip lines
You can create Horizontal stripline by adding the stripline in the vertical axis and set visible option to true. Striplines are rendered in the specified start to end range and you can add more than one stripline for an axis.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-chart-axes>
<e-chart-axis name="yAxis" valueType="Category">
<e-striplines>
<e-stripline visible="true" start="20" end="30" color="red"></e-stripline>
</e-striplines>
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" yAxisName="yAxis" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<StripLineChartData> chartData = new List<StripLineChartData>
{
new StripLineChartData { x = "Sun", y = 28 },
new StripLineChartData { x = "Mon", y = 27 },
new StripLineChartData { x = "Tue", y = 33 },
new StripLineChartData { x = "Wed", y = 36 },
new StripLineChartData { x = "Thu", y = 28 },
new StripLineChartData { x = "Fri", y = 30 },
new StripLineChartData { x = "Sat", y = 31 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StripLineChartData
{
public string x;
public double y;
}Vertical Striplines
You can create vertical stripline by adding thestripline in the horizontal axis and set visible option to true. Striplines are rendered in the specified start to end range and you can add more than one stripline for an axis.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-chart-axes>
<e-chart-axis name="xAxis" valueType="Category">
<e-striplines>
<e-stripline visible="true" start="0" end="3" color="red"></e-stripline>
</e-striplines>
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" xAxisName="xAxis" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<StripLineChartData> chartData = new List<StripLineChartData>
{
new StripLineChartData { x = "Sun", y = 28 },
new StripLineChartData { x = "Mon", y = 27 },
new StripLineChartData { x = "Tue", y = 33 },
new StripLineChartData { x = "Wed", y = 36 },
new StripLineChartData { x = "Thu", y = 28 },
new StripLineChartData { x = "Fri", y = 30 },
new StripLineChartData { x = "Sat", y = 31 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StripLineChartData
{
public string x;
public double y;
}Customize the strip line
Starting value in specific strip line can be customized by start property in strip line. Similarly, ending value is customized by end. It can be also set for starting from the corresponding origin of the axis by startFromOrigin. Size of the strip line is customized by size. Border for the stripline is customized by border. Order of the strip line such that whether it should be rendered in behind or over the series elements is customized by zIndex.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-chart-axes>
<e-chart-axis name="xAxis" valueType="Category">
<e-striplines>
<e-stripline visible="true" startFromAxis="true" size="4" zIndex="Behind" opacity="0.5" color="green"></e-stripline>
</e-striplines>
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" xAxisName="xAxis" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<StripLineChartData> chartData = new List<StripLineChartData>
{
new StripLineChartData { x = "Sun", y = 28 },
new StripLineChartData { x = "Mon", y = 27 },
new StripLineChartData { x = "Tue", y = 33 },
new StripLineChartData { x = "Wed", y = 36 },
new StripLineChartData { x = "Thu", y = 28 },
new StripLineChartData { x = "Fri", y = 30 },
new StripLineChartData { x = "Sat", y = 31 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StripLineChartData
{
public string x;
public double y;
}Customize the stripline text
You can customize the text rendered in stripline by textStyle property. Rotation of the strip line text can be changed by rotation property. Horizontal and Vertical alignment of stripline text can be changed by horizontalAlignment and verticalAlignment property.
<ejs-chart id="container" width="60%">
<e-chart-primaryxaxis valueType="Category"></e-chart-primaryxaxis>
<e-chart-axes>
<e-chart-axis name="xAxis" valueType="Category">
<e-striplines>
<e-stripline visible="true" startFromAxis="true" size="4" zIndex="Behind" opacity="0.5" color="green"
text="good" verticalAlignment="Middle" horizontalAlignment="Middle" rotation="90"></e-stripline>
</e-striplines>
</e-chart-axis>
</e-chart-axes>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" xName="x" yName="y" xAxisName="xAxis" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column"></e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<StripLineChartData> chartData = new List<StripLineChartData>
{
new StripLineChartData { x = "Sun", y = 28 },
new StripLineChartData { x = "Mon", y = 27 },
new StripLineChartData { x = "Tue", y = 33 },
new StripLineChartData { x = "Wed", y = 36 },
new StripLineChartData { x = "Thu", y = 28 },
new StripLineChartData { x = "Fri", y = 30 },
new StripLineChartData { x = "Sat", y = 31 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StripLineChartData
{
public string x;
public double y;
}Dash Array
You can create dash array stripline by using dashArray property. The Striplines are rendered with specified dash array values.
<ejs-chart id="container" enableAnimation="true">
<e-chart-primaryxaxis valueType="@Syncfusion.EJ2.Charts.ValueType.Category" interval="1"></e-chart-primaryxaxis>
<e-chart-primaryyaxis interval="10" stripLines="ViewBag.yAxis"></e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<StripLineChartData> chartData = new List<StripLineChartData>
{
new StripLineChartData { x = "Sun", y = 28 },
new StripLineChartData { x = "Mon", y = 27 },
new StripLineChartData { x = "Tue", y = 33 },
new StripLineChartData { x = "Wed", y = 36 },
new StripLineChartData { x = "Thu", y = 28 },
new StripLineChartData { x = "Fri", y = 30 },
new StripLineChartData { x = "Sat", y = 31 }
};
ViewBag.dataSource = chartData;
return View();
}
public class StripLineChartData
{
public string x;
public double y;
}Recurrence Stripline
The strip lines to be drawn repeatedly at the regular intervals – this will be useful when you want to mark an event that occurs recursively along the timeline of the chart. The following properties are used to configure this feature.
-
isRepeat- It is used to enable or disable the recurrence strip line. -
repeatEvery- It is used to mention the stripline interval. -
repeatUntil- It specifies the end value at which point strip line has to stop repeating.
<ejs-chart id="container" enableAnimation="true">
<e-chart-primaryxaxis stripLines="ViewBag.yAxis" valueType="@Syncfusion.EJ2.Charts.ValueType.Category" interval="1"></e-chart-primaryxaxis>
<e-chart-primaryyaxis interval="10"></e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="x" yName="y" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<StripLineChartData> chartData = new List<StripLineChartData>
{
new StripLineChartData { x = 1, y = 28 },
new StripLineChartData { x = 2, y = 27 },
new StripLineChartData { x = 3, y = 33 },
new StripLineChartData { x = 4, y = 36 },
new StripLineChartData { x = 5, y = 28 },
new StripLineChartData { x = 6, y = 30 },
new StripLineChartData { x = 7, y = 31 }
};
List<ChartStripLine> yaxisstriplines = new List<ChartStripLine>();
ChartStripLine stripy = new ChartStripLine();
stripy.Start = 1;
stripy.Size = 1;
stripy.IsRepeat = true;
stripy.RepeatEvery = 2;
stripy.Color = "rgba(167,169,171, 0.3)";
stripy.Visible = true;
yaxisstriplines.Add(stripy);
ViewBag.yAxis = yaxisstriplines;
ViewBag.dataSource = chartData;
return View();
}
public class StripLineChartData
{
public double x;
public double y;
}Size Type
The sizeType property refers the size of the stripline. They are,
AutoPixelYearsMonthsDaysHoursMinutesSeconds
<ejs-chart id="container" enableAnimation="true">
<e-chart-primaryxaxis stripLines="ViewBag.yAxis" valueType="@Syncfusion.EJ2.Charts.ValueType.DateTime" interval="1" intervalType="@Syncfusion.EJ2.Charts.IntervalType.Years"></e-chart-primaryxaxis>
<e-chart-primaryyaxis interval="10"></e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="xValue" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Column">
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = new DateTime(2005, 01, 01), yValue = 21 },
new LineChartData { xValue = new DateTime(2006, 01, 01), yValue = 24 },
new LineChartData { xValue = new DateTime(2007, 01, 01), yValue = 36 },
new LineChartData { xValue = new DateTime(2008, 01, 01), yValue = 38 },
};
ViewBag.dataSource = chartData;
List<ChartStripLine> yaxisstriplines = new List<ChartStripLine>();
ChartStripLine stripy = new ChartStripLine();
stripy.Start = new DateTime(2005, 01, 01);
stripy.Size = 1;
stripy.SizeType = SizeType.Years;
stripy.Color = "rgba(167,169,171, 0.3)";
stripy.Visible = true;
yaxisstriplines.Add(stripy);
ViewBag.yAxis = yaxisstriplines;
return View();
}
public class LineChartData
{
public System.DateTime xValue;
public double yValue;
}Segment Stripline
You can create stripline in a particular region with respect to segment. You can enable the segment stripline using isSegmented property. The start and end value of this type of stripline can be defined using segmentStart and segmentEnd properties.
-
isSegmented- Used to enable the segment stripline. -
segmentStart- Used to change the segment start value. Value correspond to associated axis. -
segmentEnd- Used to change the segment end value. Value correspond to associated axis. -
segmentAxisName- Used to specify the name of the associated axis.
<ejs-chart id="container" enableAnimation="true">
<e-chart-primaryyaxis stripLines="ViewBag.yAxis" interval="10"></e-chart-primaryyaxis>
<e-series-collection>
<e-series dataSource="ViewBag.dataSource" name="Gold" xName="xValue" yName="yValue" type="@Syncfusion.EJ2.Charts.ChartSeriesType.Line">
</e-series>
</e-series-collection>
</ejs-chart>public ActionResult Index()
{
List<LineChartData> chartData = new List<LineChartData>
{
new LineChartData { xValue = 1, yValue = 5 },
new LineChartData { xValue = 2, yValue = 39 },
new LineChartData { xValue = 3, yValue = 21 },
new LineChartData { xValue = 4, yValue = 51 },
new LineChartData { xValue = 5, yValue = 30 },
new LineChartData { xValue = 6, yValue = 26 }
};
List<ChartStripLine> yaxisstriplines = new List<ChartStripLine>();
ChartStripLine stripy = new ChartStripLine();
stripy.Start = 20;
stripy.End = 40;
stripy.IsSegmented = true;
stripy.SegmentStart = 2;
stripy.SegmentEnd = 4;
stripy.Color = "rgba(167,169,171, 0.3)";
stripy.Visible = true;
yaxisstriplines.Add(stripy);
ViewBag.yAxis = yaxisstriplines;
ViewBag.dataSource = chartData;
return View();
}
public class LineChartData
{
public double xValue;
public double yValue;
}