We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Chart Stripline

I have a question about chart striplines.

I want to express it like the picture above.


Q1. I want to express the strip line of the chart above the xAxis I want. (xAxis is displayed as a date, and I want to put the strip line as a variable value in the date position.)


Q2. I want to express the stripline with dasharray like in the picture.


Below is the code I applied.

function createChart(grid) {
       var chartData = new Array();
       var chart = null;
 
       if (grid.rows != null) {
           for (var i = 0; i < grid.rows.length; i++) {
               var data = new Object();
 
               var date = grid.rows[i].data.DETE;
               date = formatDate(date);
               date = date.split("-");
 
               date = date[1] + "/" + date[0];
 
               data.IN_DATE = date;
               data.SUPP_SUM = grid.rows[i].data.SUPP_SUM;
               data.CHG_SUPP_SUM = grid.rows[i].data.CHG_SUPP_SUM;
               data.WHITE_MODEL = grid.rows[i].data.WHITE_MODEL;
 
               chartData.push(data);
 
           }
           chartData.reverse();
 
           chartContainerReset();
 
           chart = new ej.charts.Chart({
               id: 'supportChart',
               width: '98%',
               hidden: false,
               palettes: ["#FFE38C","#6BB7F6", "#FB5555"],  //그래프 색상
               tooltip: {
                   enable: true
               },
               //Initializing Primary X Axis
               primaryXAxis: {
                   valueType: 'Category',
                   stripLines: [
                       { segmentAxisName: 'IN_DATE' ,segmentStart:'1/11', segmentEnd:'1/13', opacity: 0.7, dashArray: '7,7', verticalAlignment: 'Start', horizontalAlignment: 'Start', text: 'IFR', rotation: 360, textStyle: { size: 15, color: '#000000', width: 'bold' }, color: '#1b3cff' },
                       { start: 20.00, end: 20.03, opacity: 0.7, dashArray: '7,7', verticalAlignment: 'Start', horizontalAlignment: 'Start', text: 'IFC', rotation: 360, textStyle: { size: 15, color: '#000000', width: 'bold' }, color: '#1b3cff' },
                   ],
               },
           primaryYAxis:
           {
               title: 'Total support',
               rangePadding: 'None',
               minimum: 0,
               maximum: 1500,
               interval: 300,
               lineStyle: { width: 0 },
               majorTickLines: { width: 0 },
               minorTickLines: { width: 0 }
           },
           axes:
           [
               {
                   title: 'Support Change',
                   majorGridLines: { width: 0 },
                   rowIndex: 0, opposedPosition: true,
                   lineStyle: { width: 0 }, majorTickLines: { width: 0 },
                   minimum: 0, maximum: 500, interval: 50,
                   name: 'yAxis', minorTickLines: { width: 0 },
                   labelFormat: '{value}'
               },
               {
                   title: 'White Model',
                   visible : false,
                   rowIndex: 0, opposedPosition: false,
                   minimum: 0,
                   maximum: 100,
                   name: 'yAxis2',
                   labelFormat: '{value}'
               }
           ],
               series: [
                   {
                       type: 'Column',
                       dataSource: chartData,
                       xName: 'IN_DATE', width: 2,
                       yName: 'WHITE_MODEL', name: 'White Model',
                       yAxisName: 'yAxis2',
                   },
               {
                   type: 'SplineArea',
                   dataSource: chartData,
                   xName: 'IN_DATE', width: 2, border: { width: 2, color: '#6BB7F6' }, opacity: 0.8,
                   marker: {
                       visible: false,
                       width: 8,
                       height: 8,
                       shape: 'Circle',
                       fill: '#6BB7F6',
                       isFilled: true,
                       border: { width: 1, color: 'Black' }
                   },
                   yName: 'SUPP_SUM', name: 'Support Total',
                   fill: 'url(#material-gradient-chart1)',
               },
               {
                   type: 'SplineArea',
                   dataSource: chartData,
                   xName: 'IN_DATE', width: 2, border: { width: 2, color: '#FB5555' }, opacity: 0.8,
                   marker: {
                       visible: false,
                       width: 12,
                       height: 12,
                       shape: 'Triangle',
                       fill: '#FB5555',
                       stroke:'Black',
                       isFilled: true,
                       border: { width: 1, color: 'Black' },
                   },
                   yName: 'CHG_SUPP_SUM', name: 'Support Change',
                   yAxisName: 'yAxis',
                   fill: 'url(#material-gradient-chart2)',
                   dashArray: '7',
                   }
               ],
               height: '550'
           }, '#chartContainer');
 
       }


Below is the data that goes into the chart.

  1. chartData: Array(55)