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.
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.
Hi TaeWook,
Query1:
Express
the strip line of the chart above the xAxis (xAxis
is displayed as a date, and I want to put the strip line as a variable value in
the date position.)
We suggest you to place the stripLine by specify their start and end position to meet your requirement.
|
stripLines: [ { start: 28.0, end: 28.03, }, ], |
Query2:
Express
the stripline with dasharray
We suggest you to use dasharray in stripLines to meet your requirement.
|
stripLines: [ { dashArray: '5', border: { color: '#69924e', width: 2, }, }, ], |
Sample: https://stackblitz.com/edit/7gaj2f?file=index.ts
Please let us know if the above sample meets your requirement. If not, let us know your exact requirement. It will be helpful for us to analyze further and assist you better.
Regards
Nishanthi
I have one more question.
Dasharray is applied only to the border in the strip line, resulting in overlapping solid and dotted lines.
Hi TaeWook,
Query1:
Criteria for start
Specifying start values in stripline is based on the axis range of the chart. Instead of using stop values, you can use size to meet the requirement.
|
stripLines: [ { start: 28.0, size: 3, sizeType: 'Pixel' , visible: true, color: '#69924e', }, ] |
Query2: Tooltip is not proper
We have created a Javascript application by adding the tooltip .Unfortunately, we are unable to replicate the reported issue. The tested sample can be downloaded from the attached sample. Please find the below video of the sample for your reference.
Query3: Dasharray is applied only to the border in the strip line
We suggest you to use dasharray for color of stripline to meet your requirement.
|
stripLines: [ { start: 28.0, size: 3, sizeType: 'Pixel', dashArray: "10,5", visible: true, color: '#69924e', }, ] |
Regards,
Nishanthi
