Mixed x-axis : month-date & day-date

[dcmohann]

Hi, On the x-axis, instead of the month series, i am getting the combination of month-date & day-date. Refer the attachment.
Can you provide some suggestion. thx.

I am using the below data: [ { group: "Group1", data: [ { label: "6.4.4-1", data: [ { timeRange: ["Dec 04 2017", "Dec 05 2017"], val: "Ready", comment: "defect 23" }, { timeRange: ["Dec 06 2017", "Dec 12 2017"], val: "Dev - QA", comment: "defect 23" } ] } ] }, { group: "Group2", data: [ { label: "6.4.2-1", data: [ { timeRange: ["Dec 03 2017", "Dec 04 2017"], val: "Ready", comment: "defect 23" }, { timeRange: ["Dec 04 2017", "Dec 05 2017"], val: "Dev - QA", comment: "defect 23" } ] } ] } ]

Graph:

[vasturiano]

Hi @dcmohann thanks for reaching out.

The timeformat you highlighted is actually intentional, to provide a more contextual overview of the time range. Ticks on the first of the month will be labeled with only the month. At the start of each week (Sunday tick) you'll get the month-date format. Other days will be displayed as weekday-date. Beyond that you will get actual times. This is inspired by https://bl.ocks.org/mbostock/4149176.

If you prefer a different time formatting, you can provide your own using the .xTickFormat() method. F.e. to display in plain unix timestamps:

myChart.xTickFormat(ts => ts.getTime())

[dcmohann]

Thanks @vasturiano for your information. Can you provide some example, if the custom option is possible.

[vasturiano]

@dcmohann there is a custom time format example here: http://vasturiano.github.io/timelines-chart/example/custom-time-format/ [source]

I'd recommend looking into d3-time-format if you're looking for a different time format.

[dcmohann]

Hi @vasturiano, One more requirement for me, i am not sure whether the current release have this option to do it.

I would like to display the below "note" value on the segment. Is it possible?

data: [ { timeRange: [<date>, <date>], val: <val: number (continuous dataScale) or string (ordinal dataScale)> note: <String> }

[vasturiano]

@dcmohann you can use the tooltip content to add annotations to your segments, using the method zDataLabel, which supports either plain text or html content. F.e:

myChart.zDataLabel('<div>Additional <b>data</b></div>')

[dcmohann]

Hi @vasturiano, i think zDataLabel('data') shows as part of the tooltip, but i would like to display on the segment itself like

[vasturiano]

I see. That's currently not supported in the current version. But, I think it's a useful feature, so I'll leave this issue open until I can dedicate some cycles to do it. Or, I'd be happy to accept a PR for it if you have something working!