chart rendering wrong

[rjangid1]

Hi, I am getting weird behaviour in chart where lines are showing as extended beyond values.

chart options

fakeUsers2: {
        data: null,
        description: 'Some other user account information, by date',
        src: 'data/fake_users2.json',
        title: 'Some Other Account Information',
        x_accessor: 'date',
        y_accessor: 'value',
        area: false,
        miny:100
      },

attached screenshot

sample data

[
    [
        {
            "date": "2016-03-19T15:18:23.463Z",
            "value": 0
        },
        {
            "date": "2016-03-19T15:20:36.463Z",
            "value": 0
        },
        {
            "date": "2016-03-19T15:23:45.463Z",
            "value": 0
        },
        {
            "date": "2016-03-19T15:26:49.463Z",
            "value": 0
        },
        {
            "date": "2016-03-19T15:29:57.463Z",
            "value": 0
        },
        {
            "date": "2016-03-19T15:33:41.463Z",
            "value": 0
        },
        {
            "date": "2016-03-19T15:38:42.463Z",
            "value": 0
        },
        {
            "date": "2016-03-19T15:48:30.463Z",
            "value": 0
        },
        {
            "date": "2016-03-19T16:07:07.463Z",
            "value": 1
        },
        {
            "date": "2016-03-21T02:53:25.463Z",
            "value": 0
        },
        {
            "date": "2016-03-21T03:44:03.463Z",
            "value": 0
        },
        {
            "date": "2016-03-21T03:44:35.463Z",
            "value": 0
        },
        {
            "date": "2016-03-21T03:47:56.463Z",
            "value": 0
        },
        {
            "date": "2016-03-21T03:48:46.463Z",
            "value": 0
        },
        {
            "date": "2016-03-21T03:52:55.463Z",
            "value": 0
        },
        {
            "date": "2016-03-21T03:53:45.463Z",
            "value": 0
        },
        {
            "date": "2016-03-21T04:52:22.463Z",
            "value": 0
        },
        {
            "date": "2016-03-21T04:56:47.463Z",
            "value": 0
        },
        {
            "date": "2016-03-03T04:57:32.463Z",
            "value": 0
        },
        {
            "date": "2016-03-03T04:58:53.463Z",
            "value": 0
        },
        {
            "date": "2016-03-03T05:01:04.463Z",
            "value": 0
        },
        {
            "date": "2016-03-03T05:02:20.463Z",
            "value": 1
        },
        {
            "date": "2016-03-03T10:49:08.463Z",
            "value": 0
        },
        {
            "date": "2016-03-03T10:51:13.463Z",
            "value": 0
        },
        {
            "date": "2016-03-03T10:54:05.463Z",
            "value": 0
        },
        {
            "date": "2016-03-03T10:55:02.463Z",
            "value": 0
        }
    ]
]

[rjangid1]

Hi, @elmarquez , @riosc . got time to test this issue? Thanks

[nonplus]

I've run into a similar issue and it was caused by the default interpolation configuration used by metrics-graphics. I added an interpolate: d3.curveMonotoneX option to my chart and the overshoots got fixed. There are quite a few interpolation options to choose from - this Smoothing out the lines in d3.js article has a nice overview.

BTW, in my case, I had a fairly sparse data set (clusters of points close together with long intervals between clusters) and I had to insert additional 0-value data points at the beginning/end of each cluster to make it look right.