javascriptangularchartsngx-charts

Swimlane ngx-charts in Angular2 - Different styles on a single line chart

I have a single 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 using ngx-charts?

enter image description here

Solution

  • Let us assume the date after which you want to change the color as T.

    Now you can divide the series into 2 parts

    1. The from start date to T
    2. From T to end date.

    And now you can plot the graph using 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
      }
    ]
  }
]