No column range color when a line series involved?
Note that example code is included after the screenshots.
The colorful image below is created using range color settings applied to a column series chart. The less colorful image is the same data, color definitions and chart definition as the first except a StepLine series is added (the line indicates a required threshold).
I can understand that color might not be applied to segments of a line (though it would be nice). Less easy to understand is why just because a line series is added to a chart, the color of the column series is removed. Is this intended behavior?
Here is code to reproduce the charts shown in the screenshot. By default it shows the less colorful chart because it include a line series. Just comment out the 'steplineSeries' from the chart series array to see the colorful one.
import { Chart, BarSeries, ColumnSeries, LineSeries, StepLineSeries, Legend, Category, DataLabel, Tooltip as ChartTooltip } from '@syncfusion/ej2-charts';
Chart.Inject(BarSeries, ColumnSeries, LineSeries, StepLineSeries, Legend, DataLabel, ChartTooltip, Category);
let columnSeries = {
"dataSource": [
{
"x": "10-Eastern Workforce Investment Area",
"y": 97.53
},
{
"x": "11-North Central Workforce Investment Area",
"y": 85.2
},
{
"x": "12-Northwest Workforce Investment Area",
"y": 77.7
},
{
"x": "13-South Central Workforce Investment Area",
"y": 90.54
},
{
"x": "14-Southwest Workforce Investment Area",
"y": 112.82
}
],
"xName": "x",
"yName": "y",
"type": "Column",
"name": "% Achieved"
}
let steplineSeries = {
dataSource: [
{
"x": "10-Eastern Workforce Investment Area",
"y": 71.5
},
{
"x": "11-North Central Workforce Investment Area",
"y": 71.5
},
{
"x": "12-Northwest Workforce Investment Area",
"y": 71.5
},
{
"x": "13-South Central Workforce Investment Area",
"y": 71.5
},
{
"x": "14-Southwest Workforce Investment Area",
"y": 71.5
}
],
xName: 'x',
yName: 'y',
type: 'StepLine',
name: 'Goal'
};
let benchmarkChart = new Chart(
{
title: 'Performance vs. Goal for Employment Q2 Adult',
titleStyle:
{
fontFamily: 'Roboto',
fontWeight: '200',
textAlignment: 'Near',
textOverflow: 'None',
size: '15px'
},
legendSettings:
{
visible: false,
mode: 'Range',
toggleVisibility: false
},
tooltip:
{
enable: true,
},
primaryYAxis:
{
title: '% Achieved',
},
primaryXAxis:
{
valueType: 'Category',
labelPosition: 'Inside',
labelStyle:
{
fontFamily: 'Roboto',
size: '15px'
},
labelPadding: 10,
labelRotation: 270,
},
series:
[
columnSeries,
steplineSeries
],
rangeColorSettings: [
{
"colors": [
"#ef5350"
],
"label": "< 6,500%",
"start": 0,
"end": 65
},
{
"colors": [
"#ef9a9a"
],
"label": "Between 6,500% and 8,999%",
"start": 65,
"end": 89.99
},
{
"colors": [
"#f9a825"
],
"label": "Between 9,000% and 9,499%",
"start": 90,
"end": 94.99
},
{
"colors": [
"#ffee58"
],
"label": "Between 9,500% and 9,999%",
"start": 95,
"end": 99.99
},
{
"colors": [
"#d0e9b3"
],
"label": "Between 10,000% and 10,990%",
"start": 100,
"end": 109.9
},
{
"colors": [
"#0adb2a"
],
"label": ">= 11,000%",
"start": 110,
"end": null
}
]
}, '#chart' );
