Angular 9 combination of solid and dotted line chart
9 Replies
Hi Neha,
We would like to let you know that there are no direct support to achieve your requirement through line chart. Hence we suggest you to use MultiColoredLine chart and loaded event to achieve your requirement. Please find the sample, code snippet and screenshot below for your reference.
Code Snippet:
|
App.component.html:
<ejs-chart
style="display:block"
align="center"
id="chart"
[title]="title"
[primaryXAxis]="primaryXAxis"
[primaryYAxis]="primaryYAxis"
[tooltip]="tooltip"
(load)="load($event)"
(loaded)="loaded($event)"
[chartArea]="chartArea"
[width]="width"
[legendSettings]="legend"
>
<e-series-collection>
<e-series
[dataSource]="data"
type="MultiColoredLine"
xName="x"
yName="y"
name="Rainfall"
width="1.5"
[emptyPointSettings]="emptyPoint"
pointColorMapping="color"
>
</e-series>
</e-series-collection>
</ejs-chart>
App.component.ts:
// add your additional code here
public data: Object[] = [
{ x: new Date(2005, 0, 1), y: 21, color: "blue" },
{ x: new Date(2006, 0, 1), y: 24, color: "blue" },
{ x: new Date(2007, 0, 1), y: null, color: "red" },
{ x: new Date(2008, 0, 1), y: 38, color: "blue" },
{ x: new Date(2009, 0, 1), y: 54, color: "blue" },
{ x: new Date(2010, 0, 1), y: null, color: "red" },
{ x: new Date(2011, 0, 1), y: 70, color: "blue" }
];
public emptyPoint: Object = {
mode: "Average"
};
public loaded(args: ILoadedEventArgs): void {
for (var i = 0; i < args.chart.series[0].dataSource["length"]; i++) {
if (args.chart.series[0].dataSource[i].y == null) {
document
.getElementById("chart_Series_0_Point_" + i)
.setAttribute("stroke-dasharray", "5,5");
}
}
}
// add your additional code here
|
Screenshot:
Let us know if you have any concerns.
Regards,
Srihari M
Hi Neha,
Sorry for the inconvenience.
We suspect that the reported scenario might occur due to the different chart id used from the provided sample. Hence we suggest you to use below solution to overcome the reported scenario. Please find the sample, code snippet and screenshot below.
Code Snippet:
|
// add your additional code here
public loaded(args: ILoadedEventArgs): void {
for (var i = 0; i < args.chart.series[0].dataSource["length"]; i++) {
if (args.chart.series[0].dataSource[i].y == null) {
document.getElementById(args.chart.element.id + "_Series_0_Point_" + i).setAttribute("stroke-dasharray", "5,5");
}
}
}
// add your additional code here |
Screenshot:
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.
- Try to reproduce the reported scenario in the provided sample. (or)
- Share the details if you have done any other customization in your sample.
Regards,
Srihari M
Hi Neha,
Based on the provided code snippet we have tried for multiple series with the mentioned code snippet and it is working fine. Unfortunately we are unable to reproduce the reported scenario in the latest version of the chart 19.1.63. Please find the sample used for testing and screenshot for your reference.
Code Snippet:
|
// add your additional code here
public loaded(args: ILoadedEventArgs): void {
if (args.chart.series) {
let chartId = args.chart.element.id;
// tslint:disable-next-line: no-any
args.chart.series.forEach(
(element: { dataSource: { y: any }[] }, index: any) => {
console.log('INSIDE FOREACH = ', element);
// tslint:disable-next-line: no-any
element.dataSource.forEach((elem: { y: any }, i) => {
if (elem.y == null) {
console.log(
'DOC = ',
document.getElementById(
chartId + '_Series_' + index + '_Point_' + i
)
);
document
.getElementById(chartId + '_Series_' + index + '_Point_' + i)
.setAttribute('stroke-dasharray', '5,5');
}
});
}
);
}
}
// add your additional code here
|
Screenshot:
If you still face this issue. we would like to set up a web meeting with you to check the reported scenario from your end based on your availability, which will be helpful in further analysis and provide you exact solution sooner.
Regards,
Srihari M
SIGN IN To post a reply.
