Swimlane ngx-charts in Angular2 - Different colors on one line chart

Question

I have one line chart with dates on the X axis. After a certain date, I would like the line to be a different color. Is this possible with ngx diagrams?

Answer 1

Suppose the date after which you want to change the color as T.

Now you can divide the series into 2 parts

• From start date to T
• From Tto the end date.

And now you can plot using a different color for different series

The following data will generate the desired graph.

var data = [
  {
    "name": "Current",
    "series": [
      {
        "value": 5599,
        "name": "2016-09-20T01:04:28.176Z"
      },
      {
        "value": 6247,
        "name": "2016-09-20T12:51:24.713Z"
      },
      {
        "value": 4283,
        "name": "2016-09-18T15:42:04.800Z"
      },
      {
        "value": 2643,
        "name": "2016-09-13T20:10:53.904Z"
      },
      {
        "value": 4105,
        "name": "2016-09-18T06:15:10.845Z"
      },
      {
        "name": "2016-09-18T13:08:42.085Z",
        "value": 4401
      },
      {
        "name": "2016-09-20T01:04:28.176Z",
        "value": 3443
      }
    ]
  },
  {
    "name": "Future",
    "series": [
      {
        "value": 3443,
        "name": "2016-09-20T01:04:28.176Z"
      },
      {
        "value": 2604,
        "name": "2016-09-20T12:51:24.713Z"
      },
      {
        "value": 2158,
        "name": "2016-09-18T15:42:04.800Z"
      },
      {
        "value": 5519,
        "name": "2016-09-13T20:10:53.904Z"
      },
      {
        "value": 4532,
        "name": "2016-09-18T06:15:10.845Z"
      },
      {
        "name": "2016-09-18T13:08:42.085Z",
        "value": 2474
      }
    ]
  }
]

Run codeHide result