Striplines

28 Jun 20178 minutes to read

EjChart supports horizontal and vertical striplines.

Horizontal Stripline

You can create horizontal stripline by adding the e-primaryxaxis-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.

  • HTML
    • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
    <head>
        <title>Essential Studio for AngularJS: Chart</title>
        <!--CSS and Script file References -->
    </head>
    <body ng-controller="ChartCtrl">
        <div id="container" ej-chart>
        <e-primaryyaxis-stripline>
        <e-primaryyaxis-stripline e-visible="true" e-start="30" e-end="40">
        </e-primaryyaxis-stripline>
        </e-primaryyaxis-stripline>
        </div>
        <script>
        angular.module('ChartApp', ['ejangular'])
        .controller('ChartCtrl', function ($scope) {
              
                   });
        </script>
    </body>
</html>

    Vertical Stripline

    You can create vertical stripline by adding the e-primaryyaxis-stripline in the horizontal axis and set visible option to true.

  • HTML
    • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
    <head>
        <title>Essential Studio for AngularJS: Chart</title>
        <!--CSS and Script file References -->
    </head>
    <body ng-controller="ChartCtrl">
        <div id="container" ej-chart>
        <e-primaryxaxis-stripline>
        <e-primaryxaxis-stripline e-visible="true" e-start="3" e-end="7">
        </e-primaryxaxis-stripline>
        </e-primaryxaxis-stripline>
        </div>
        <script>
        angular.module('ChartApp', ['ejangular'])
        .controller('ChartCtrl', function ($scope) {      
                   });
        </script>
    </body>
</html>

    Customize the Text

    To customize the stripLine text, use the text and fontoptions.

  • HTML
    • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
    <head>
        <title>Essential Studio for AngularJS: Chart</title>
        <!--CSS and Script file References -->
    </head>
    <body ng-controller="ChartCtrl">
        <div id="container" ej-chart>
        <e-primaryyaxis-stripline>
        <e-primaryyaxis-stripline e-text="High Temperature" e-font-size="18px"
        e-font-color="white">
        </e-primaryyaxis-stripline>
        </e-primaryyaxis-stripline>
        </div>
        <script>
        angular.module('ChartApp', ['ejangular'])
        .controller('ChartCtrl', function ($scope) {
              
                   });
        </script>
    </body>
</html>

    Text Alignment

    Stripline text can be aligned by using the textAlignment property.

  • HTML
    • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
    <head>
        <title>Essential Studio for AngularJS: Chart</title>
        <!--CSS and Script file References -->
    </head>
    <body ng-controller="ChartCtrl">
        <div id="container" ej-chart>
        <e-primaryyaxis-stripline>
        <e-primaryyaxis-stripline e-textalignment="middletop">
        </e-primaryyaxis-stripline>
        </e-primaryyaxis-stripline>
        </div>
        <script>
        angular.module('ChartApp', ['ejangular'])
        .controller('ChartCtrl', function ($scope) {                
                   });
        </script>
    </body>
</html>

    Customize the Stripline

    To customize the stripLine styles, use the color, opacity, borderWidthand borderColor properties.

  • HTML
    • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
    <head>
        <title>Essential Studio for AngularJS: Chart</title>
        <!--CSS and Script file References -->
    </head>
    <body ng-controller="ChartCtrl">
        <div id="container" ej-chart>
        <e-primaryyaxis-stripline>
        <e-primaryyaxis-stripline e-color="#33CCFF" e-borderwidth="2" e-opacity="0.5"
        e-bordercolor="red">
        </e-primaryyaxis-stripline>
        </e-primaryyaxis-stripline>
        </div>
        <script>
        angular.module('ChartApp', ['ejangular'])
        .controller('ChartCtrl', function ($scope) {
                  });
        </script>
    </body>
</html>

    Change the Z-order of the stripline

    Stripline zIndex] property is used to display the stripLine either behind or over the series.

  • HTML
    • <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="ChartApp">
    <head>
        <title>Essential Studio for AngularJS: Chart</title>
        <!--CSS and Script file References -->
    </head>
    <body ng-controller="ChartCtrl">
        <div id="container" ej-chart>
        <e-primaryyaxis-stripline>
        <e-primaryyaxis-stripline e-zindex="over">
        </e-primaryyaxis-stripline>
        </e-primaryyaxis-stripline>
        </div>
        <script>
        angular.module('ChartApp', ['ejangular'])
        .controller('ChartCtrl', function ($scope) {
                });
        </script>
    </body>
</html>