How to use strip line in JavaScript Chart?
Stripline is used to highlight specific sections of a chart area. This is most commonly used in sales report, monthly report, weather report and temperature report.
JavaScript Chart supports to create more than one Stripline horizontally or vertically and customize its color, zOrder, text, font, etc., to differentiate the chart data. Stripline can be implemented within the primary axis either horizontally or vertically for a given range.
To draw Stripline for an axis in chart area, you need to create Stripline array object for that axis and provide start and end range for Stripline. You can add text for Stripline using text property and customize font and color of the Stripline. You can refer to the following code example.
JS
$("#container").ejChart(
{
//…..,
primaryYAxis:
{
stripline: [{
start: 30,
end: 40,
text: 'High Temperature',
textAlignment: 'middlecenter',
color: '#0D97D4',
font: { size: '18px', color: 'white' },
zIndex: 'behind'
},
{
start: 20,
end: 30,
text: 'Average Temperature',
color: '#00AEFF',
zIndex: 'behind',
font: { size: '18px', color: 'white' },
textAlignment: 'middlecenter'
},
{
start: 10,
end: 20,
text: 'Low Temperature',
textAlignment: 'middlecenter',
font: { size: '18px', color: 'white' },
color: '#14B9FF',
zIndex: 'behind',
}],
},
//………..,
});
JS Playground Link: Strip Lines
Conclusion
I hope you enjoyed learning about how to use strip line in JavaScript Chart.
You can refer to our JavaScript Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
