Version 1
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"usermeta": {
"deneb": {
"build": "1.4.0.0",
"metaVersion": 1,
"provider": "vegaLite",
"providerVersion": "5.4.0"
},
"interactivity": {
"tooltip": true,
"contextMenu": true,
"selection": false,
"highlight": false,
"dataPointLimit": 50
},
"information": {
"name": "KPI Card min max",
"description": "[No Description Provided]",
"author": "Kerry Kolosko",
"uuid": "38b2f82c-ced8-4cdc-9828-17012dd4ef41",
"generated": "2022-10-11T11:19:34.327Z",
"previewImageBase64PNG": "data:image/png;base64,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"
},
"dataset": [
{
"key": "__0__",
"name": "Date",
"description": "",
"type": "dateTime",
"kind": "column"
},
{
"key": "__1__",
"name": "Callout Variance Text",
"description": "Formatted text string",
"type": "text",
"kind": "measure"
},
{
"key": "__2__",
"name": "Values",
"description": "",
"type": "numeric",
"kind": "measure"
},
{
"key": "__3__",
"name": "Callout Value",
"description": "",
"type": "numeric",
"kind": "measure"
}
]
},
"config": {
"autosize": {
"type": "fit",
"contains": "padding"
},
"view": {"stroke": "transparent"},
"font": "Segoe UI",
"bar": {"color": "#CE6C47"},
"axis": {
"domain": false,
"labelColor": "#605E5C",
"labelFontSize": 12,
"labelPadding": 5,
"ticks": false,
"tickCount": 5,
"titleFontSize": 14,
"titleFontWeight": "bold",
"titleColor": "#605E5C",
"gridDash": [1, 5],
"gridColor": null
}
},
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "line",
"interpolate": "natural",
"tooltip": true
},
"encoding": {
"color": {"value": "gray"},
"x": {
"field": "__0__",
"type": "temporal",
"axis": null
},
"y": {
"field": "__2__",
"type": "quantitative",
"axis": null
}
}
},
{
"mark": {
"type": "circle",
"tooltip": true
},
"encoding": {
"color": {"value": "green"},
"size": {"value": 50},
"x": {
"aggregate": "max",
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": {
"argmax": "__0__"
},
"field": "__2__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "circle",
"tooltip": true
},
"encoding": {
"color": {"value": "teal"},
"size": {"value": 50},
"x": {
"aggregate": {
"argmin": "__2__"
},
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": {
"argmin": "__2__"
},
"field": "__2__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "circle",
"tooltip": true
},
"encoding": {
"color": {"value": "black"},
"size": {"value": 50},
"x": {
"aggregate": {
"argmax": "__2__"
},
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": {
"argmax": "__2__"
},
"field": "__2__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "text",
"dx": 20,
"dy": 0,
"xOffset": 0,
"yOffset": 0,
"angle": 0,
"align": "left",
"baseline": "bottom",
"font": "sans-serif",
"fontSize": 16,
"fontStyle": "normal",
"fontWeight": "normal",
"limit": 0
},
"encoding": {
"x": {
"aggregate": "max",
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": "max",
"field": "__2__",
"type": "quantitative"
},
"text": {"datum": "Sales"}
}
},
{
"mark": {
"type": "text",
"dx": 20,
"dy": 20,
"xOffset": 0,
"yOffset": 3,
"angle": 0,
"align": "left",
"baseline": "bottom",
"font": "sans-serif",
"fontSize": 20,
"fontStyle": "normal",
"fontWeight": "bold",
"limit": 0
},
"encoding": {
"x": {
"aggregate": "max",
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": "max",
"field": "__2__",
"type": "quantitative"
},
"text": {
"field": "__3__",
"format": ".2s"
}
}
},
{
"mark": {
"type": "text",
"dx": 20,
"dy": 20,
"xOffset": 0,
"yOffset": 5,
"angle": 0,
"align": "left",
"baseline": "top",
"font": "sans-serif",
"fontSize": 14,
"fontStyle": "normal",
"fontWeight": "normal",
"limit": 0
},
"encoding": {
"x": {
"aggregate": "max",
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": "max",
"field": "__2__",
"type": "quantitative"
},
"text": {"field": "__1__"}
}
}
]
}Version 2
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"usermeta": {
"deneb": {
"build": "1.4.0.0",
"metaVersion": 1,
"provider": "vegaLite",
"providerVersion": "5.4.0"
},
"interactivity": {
"tooltip": true,
"contextMenu": true,
"selection": false,
"highlight": false,
"dataPointLimit": 50
},
"information": {
"name": "KPI Card min max shapes",
"description": "[No Description Provided]",
"author": "Kerry Kolosko",
"uuid": "72314091-590e-490e-9bf4-098899815311",
"generated": "2022-10-11T11:21:41.926Z",
"previewImageBase64PNG": "data:image/png;base64,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"
},
"dataset": [
{
"key": "__0__",
"name": "Date",
"description": "",
"type": "dateTime",
"kind": "column"
},
{
"key": "__1__",
"name": "Callout Variance Text",
"description": "Formatted Text string",
"type": "text",
"kind": "measure"
},
{
"key": "__2__",
"name": "Values",
"description": "",
"type": "numeric",
"kind": "measure"
},
{
"key": "__3__",
"name": "Callout Value",
"description": "",
"type": "numeric",
"kind": "measure"
}
]
},
"config": {
"autosize": {
"type": "fit",
"contains": "padding"
},
"view": {"stroke": "transparent"},
"font": "Segoe UI",
"bar": {"color": "#CE6C47"},
"axis": {
"domain": false,
"labelColor": "#605E5C",
"labelFontSize": 12,
"labelPadding": 5,
"ticks": false,
"tickCount": 5,
"titleFontSize": 14,
"titleFontWeight": "bold",
"titleColor": "#605E5C",
"gridDash": [1, 5],
"gridColor": null
}
},
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "line",
"strokeDash": [4, 4],
"tooltip": true
},
"encoding": {
"color": {"value": "gray"},
"x": {
"field": "__0__",
"type": "temporal",
"axis": null
},
"y": {
"field": "__2__",
"type": "quantitative",
"axis": null
}
}
},
{
"mark": {
"type": "point",
"shape": "square",
"filled": true,
"angle": -45,
"tooltip": true
},
"encoding": {
"color": {"value": "black"},
"size": {"value": 45},
"x": {
"aggregate": "max",
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": {
"argmax": "__0__"
},
"field": "__2__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "circle",
"tooltip": true
},
"encoding": {
"color": {"value": "black"},
"size": {"value": 50},
"x": {
"aggregate": {
"argmin": "__2__"
},
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": {
"argmin": "__2__"
},
"field": "__2__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "point",
"shape": "cross",
"filled": true,
"angle": -45,
"tooltip": true
},
"encoding": {
"color": {"value": "black"},
"size": {"value": 50},
"x": {
"aggregate": {
"argmax": "__2__"
},
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": {
"argmax": "__2__"
},
"field": "__2__",
"type": "quantitative"
}
}
},
{
"mark": {
"type": "text",
"dx": 20,
"dy": 0,
"xOffset": 0,
"yOffset": 0,
"angle": 0,
"align": "left",
"baseline": "bottom",
"font": "sans-serif",
"fontSize": 16,
"fontStyle": "normal",
"fontWeight": "normal",
"limit": 0
},
"encoding": {
"x": {
"aggregate": "max",
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": "max",
"field": "__2__",
"type": "quantitative"
},
"text": {"datum": "Sales"}
}
},
{
"mark": {
"type": "text",
"dx": 20,
"dy": 20,
"xOffset": 0,
"yOffset": 3,
"angle": 0,
"align": "left",
"baseline": "bottom",
"font": "sans-serif",
"fontSize": 20,
"fontStyle": "normal",
"fontWeight": "bold",
"limit": 0
},
"encoding": {
"x": {
"aggregate": "max",
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": "max",
"field": "__2__",
"type": "quantitative"
},
"text": {
"field": "__3__",
"format": ".2s"
}
}
},
{
"mark": {
"type": "text",
"dx": 20,
"dy": 20,
"xOffset": 0,
"yOffset": 5,
"angle": 0,
"align": "left",
"baseline": "top",
"font": "sans-serif",
"fontSize": 14,
"fontStyle": "normal",
"fontWeight": "normal",
"limit": 0
},
"encoding": {
"x": {
"aggregate": "max",
"field": "__0__",
"type": "temporal"
},
"y": {
"aggregate": "max",
"field": "__2__",
"type": "quantitative"
},
"text": {"field": "__1__"}
}
}
]
}