| license: mit | |
| height: 500 | |
| scrolling: yes | |
| border: yes | |
This is a postscript to https://bl.ocks.org/ijlyttle/84ce12ce2c1093070f645a2bae3b8fa0
The x scale is UTC and works as I expect; a solution is to add a UTC scale to the tooltip:
"tooltip": [
{
"field": "date",
"type": "temporal",
"format": "%Y-%m-%d",
"scale": {
"type": "utc"
}
},
{
"field": "value",
"type": "quantitative"
}
]| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- uploaded using vegawidget --> | |
| <script src="https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.2"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-lite@2.5.0"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vega-embed@3.14.0"></script> | |
| <link rel="stylesheet" type="text/css" href="vega-embed.css"> | |
| </head> | |
| <body> | |
| <div id="vis"></div> | |
| <script type="text/javascript"> | |
| const spec = "spec.json"; | |
| const opt = {"defaultStyle":true,"renderer":"canvas"}; | |
| vegaEmbed('#vis', spec, opt).then(function(result) { | |
| // access view as result.view | |
| }).catch(console.error); | |
| </script> | |
| </body> | |
| </html> |
| { | |
| "$schema": "https://vega.github.io/schema/vega-lite/v2.json", | |
| "description": "Tooltip issue", | |
| "data": { | |
| "values": [ | |
| { | |
| "date": "2018-01-01", | |
| "interval_start_utc": "2018-01-01T00:00:00Z", | |
| "interval_end_utc": "2018-01-02T00:00:00Z", | |
| "value": 0.0932 | |
| }, | |
| { | |
| "date": "2018-01-02", | |
| "interval_start_utc": "2018-01-02T00:00:00Z", | |
| "interval_end_utc": "2018-01-03T00:00:00Z", | |
| "value": 0.4407 | |
| }, | |
| { | |
| "date": "2018-01-03", | |
| "interval_start_utc": "2018-01-03T00:00:00Z", | |
| "interval_end_utc": "2018-01-04T00:00:00Z", | |
| "value": 0.4625 | |
| }, | |
| { | |
| "date": "2018-01-04", | |
| "interval_start_utc": "2018-01-04T00:00:00Z", | |
| "interval_end_utc": "2018-01-05T00:00:00Z", | |
| "value": 0.3028 | |
| }, | |
| { | |
| "date": "2018-01-05", | |
| "interval_start_utc": "2018-01-05T00:00:00Z", | |
| "interval_end_utc": "2018-01-06T00:00:00Z", | |
| "value": 0.3285 | |
| }, | |
| { | |
| "date": "2018-01-06", | |
| "interval_start_utc": "2018-01-06T00:00:00Z", | |
| "interval_end_utc": "2018-01-07T00:00:00Z", | |
| "value": 0.15 | |
| }, | |
| { | |
| "date": "2018-01-07", | |
| "interval_start_utc": "2018-01-07T00:00:00Z", | |
| "interval_end_utc": "2018-01-08T00:00:00Z", | |
| "value": 0.2946 | |
| } | |
| ] | |
| }, | |
| "mark": "rect", | |
| "encoding": { | |
| "x": { | |
| "field": "interval_start_utc", | |
| "scale": { | |
| "type": "utc" | |
| }, | |
| "title": "date", | |
| "type": "temporal" | |
| }, | |
| "x2": { | |
| "field": "interval_end_utc", | |
| "type": "temporal" | |
| }, | |
| "color": { | |
| "field": "value", | |
| "type": "quantitative" | |
| }, | |
| "tooltip": [ | |
| { | |
| "field": "date", | |
| "type": "temporal", | |
| "format": "%Y-%m-%d", | |
| "scale": { | |
| "type": "utc" | |
| } | |
| }, | |
| { | |
| "field": "value", | |
| "type": "quantitative" | |
| } | |
| ] | |
| } | |
| } |
