We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
For example, there are two lines(MA and TX), how can I get the color of MA and TX in tooltip?
Demo vega config:
{ "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A basic line chart example.", "width": 524, "height": 363, "padding": 0, "autosize": { "type": "fit", "contains": "padding" }, "data": [ { "name": "table", "values": [ { "date": 1668124800000, "sales": 17000, "state": "MA", "xxx":"xxxxx" }, { "date": 1668124800000, "sales": 22000, "state": "TX" }, { "date": 1668211200000, "sales": 19000, "state": "MA" }, { "date": 1668211200000, "sales": 18000, "state": "TX" }, { "date": 1668297600000, "sales": 30000, "state": "MA" }, { "date": 1668297600000, "sales": 49000, "state": "TX" }, { "date": 1668384000000, "sales": 41000, "state": "MA" }, { "date": 1668384000000, "sales": 28000, "state": "TX" }, { "date": 1668470400000, "sales": 36000, "state": "MA" }, { "date": 1668470400000, "sales": 43000, "state": "TX" } ], "format": { "parse": { "date": "date" } } }, { "name": "tableFold", "source": "table", "transform": [ { "type": "fold", "as": [ "_foldKey", "_foldValue" ], "fields": [ "state" ] } ] }, { "name": "highlightedPoint", "source": "tableFold", "transform": [ { "type": "filter", "expr": "hover && hover.datum.date === datum.date" }, ] }, ], "signals": [ { "name": "hover", "value": null, "on": [ {"events": "@points_voronoi:mouseover", "update": "datum"}, {"events": "@points_voronoi:mouseout", "update": "null"} ] }, { "name": "signal_highligtedpoint", "value": "test", "update": "data('highlightedPoint')[0]" }, { "name": "indexDate", "update": "", "on": [ { "events": "mousemove", "update": "invert('x', clamp(x(), 0, width))" } ] } ], "scales": [ { "name": "x", "type": "utc", "range": "width", "domain": { "data": "table", "field": "date" } }, { "name": "y", "type": "linear", "range": "height", "nice": true, "zero": true, "domain": { "data": "tableFold", "field": "sales" } }, { "name": "color", "type": "ordinal", "range": [ "#3A78E4", "#FEB648", "#9679CD", "#81C583", "#65B5F7", "#FFD146", "#BB68CA", "#B0D685", "#4DC3F9", "#FF825C", "#EF588A", "#D0DF3F", "#50D0E2", "#E97374" ], "domain": { "data": "tableFold", "field": "state", "sort": true } } ], "axes": [ { "orient": "bottom", "scale": "x", "titleColor": "#333333", "titlePadding": 13, "titleFontSize": 12, "domainColor": "#C6CAD1", "domainWidth": 1, "labelAngle": 0, "labelColor": "#999999", "labelPadding": 6, "labelOverlap": "parity", "labelSeparation": 0, "grid": true, "gridDash": [ 0, 0 ], "tickSize": 0, "tickWidth": 1, "tickColor": "#999999", "title": "Date" }, { "orient": "left", "scale": "y", "titleColor": "#333333", "titlePadding": 13, "titleFontSize": 12, "domainColor": "#C6CAD1", "domainWidth": 1, "labelAngle": 0, "labelColor": "#999999", "labelPadding": 2, "labelOverlap": false, "labelSeparation": 0, "grid": true, "gridDash": [ 0, 0 ], "tickSize": 0, "tickCount": 5, "tickWidth": 1, "tickColor": "#999999", "title": "Sales ($)", "formatType": "number", "format": "$2s" } ], "marks": [ // { // "type": "rule", // "encode": { // "update": { // "x": {"scale": "x", "signal": "indexDate", "offset": 0.5}, // "y": {"value": 0}, // "y2": {"field": {"group": "height"}}, // "stroke": {"value": "blue"} // } // }, // }, { "type": "group", "markType": "group", "from": { "facet": { "name": "series", "data": "tableFold", "groupby": "_foldValue" } }, "marks": [ { "name": "mainLine", "type": "line", "markType": "main", "from": { "data": "series" }, "encode": { "enter": { "x": { "scale": "x", "field": "date" }, "y": { "scale": "y", "field": "sales" }, "stroke": { "scale": "color", "field": "_foldValue" }, "interpolate": { "value": "linear" }, "strokeWidth": { "value": 2 }, "strokeDash": { "value": [ 0, 0 ] }, } } }, { "name": "points_on_line", "from": {"data": "series"}, "type": "symbol", "encode": { "update": { "fill": {"value": "transparent"}, "size": {"value": 10}, "stroke": {"value": "transparent"}, "strokeWidth": {"value": 0.5}, "x": {"field": "date", "scale": "x"}, "y": {"value": 0} } } }, { "name": "points_voronoi", "type": "path", "from": {"data": "points_on_line"}, "encode": { "update": { "opacity": {"value": 0}, "fill": {"value": "transparent"}, "strokeWidth": {"value": 0.35}, "stroke": {"value": "red"}, "strokeOpacity": {"value": 1}, "isVoronoi": {"value": true}, "tooltip": {"signal": "signal_highligtedpoint"} } }, "transform": [ { "type": "voronoi", "x": "datum.x", "y": "datum.y", "size": [{"signal": "width"}, {"signal": "height"}], } ] }, { "from": {"data": "highlightedPoint"}, "type": "symbol", "interactive": false, "encode": { "update": { "x": {"scale": "x", "field": "date"}, "y": {"scale": "y", "field": "sales"}, "stroke": { "scale": "color", "field": "_foldValue" }, "strokeWidth": {"value": 4}, "fill": {"value": "white"}, "size": {"value": 150}, "strokeOpacity": {"value": 0.3}, } } }, { "from": {"data": "highlightedPoint"}, "type": "rule", "encode": { "update": { "x": {"scale": "x", "field": "date"}, "y": {"value": 0}, "y2": {"signal": "height"}, "stroke": {"value": "blue"} } }, } ] } ], "title": { "orient": "top", "align": "left", "anchor": "start", "angle": 0, "baseline": "alphabetic", "color": "#333333", "dx": 0, "dy": 0, "fontSize": 16, "fontWeight": "bold", "offset": 0, "text": "Sales by state" }, "legends": [ { "title": "", "titleFontSize": 16, "orient": "right", "direction": "vertical", "rowPadding": 8, "padding": 10, "symbolType": "circle", "symbolSize": 30, "symbolStrokeWidth": 0, "labelFontSize": 11, "encode": { "symbols": { "name": "legendSymbol", "fill": { "value": "transparent" }, "strokeWidth": { "value": 2 }, "size": { "value": 64 } }, "labels": { "name": "legendLabel" } }, "fill": "color" } ] }
The text was updated successfully, but these errors were encountered:
Duplicate of #215
Sorry, something went wrong.
No branches or pull requests
For example, there are two lines(MA and TX), how can I get the color of MA and TX in tooltip?
Demo vega config:
{ "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A basic line chart example.", "width": 524, "height": 363, "padding": 0, "autosize": { "type": "fit", "contains": "padding" }, "data": [ { "name": "table", "values": [ { "date": 1668124800000, "sales": 17000, "state": "MA", "xxx":"xxxxx" }, { "date": 1668124800000, "sales": 22000, "state": "TX" }, { "date": 1668211200000, "sales": 19000, "state": "MA" }, { "date": 1668211200000, "sales": 18000, "state": "TX" }, { "date": 1668297600000, "sales": 30000, "state": "MA" }, { "date": 1668297600000, "sales": 49000, "state": "TX" }, { "date": 1668384000000, "sales": 41000, "state": "MA" }, { "date": 1668384000000, "sales": 28000, "state": "TX" }, { "date": 1668470400000, "sales": 36000, "state": "MA" }, { "date": 1668470400000, "sales": 43000, "state": "TX" } ], "format": { "parse": { "date": "date" } } }, { "name": "tableFold", "source": "table", "transform": [ { "type": "fold", "as": [ "_foldKey", "_foldValue" ], "fields": [ "state" ] } ] }, { "name": "highlightedPoint", "source": "tableFold", "transform": [ { "type": "filter", "expr": "hover && hover.datum.date === datum.date" }, ] }, ], "signals": [ { "name": "hover", "value": null, "on": [ {"events": "@points_voronoi:mouseover", "update": "datum"}, {"events": "@points_voronoi:mouseout", "update": "null"} ] }, { "name": "signal_highligtedpoint", "value": "test", "update": "data('highlightedPoint')[0]" }, { "name": "indexDate", "update": "", "on": [ { "events": "mousemove", "update": "invert('x', clamp(x(), 0, width))" } ] } ], "scales": [ { "name": "x", "type": "utc", "range": "width", "domain": { "data": "table", "field": "date" } }, { "name": "y", "type": "linear", "range": "height", "nice": true, "zero": true, "domain": { "data": "tableFold", "field": "sales" } }, { "name": "color", "type": "ordinal", "range": [ "#3A78E4", "#FEB648", "#9679CD", "#81C583", "#65B5F7", "#FFD146", "#BB68CA", "#B0D685", "#4DC3F9", "#FF825C", "#EF588A", "#D0DF3F", "#50D0E2", "#E97374" ], "domain": { "data": "tableFold", "field": "state", "sort": true } } ], "axes": [ { "orient": "bottom", "scale": "x", "titleColor": "#333333", "titlePadding": 13, "titleFontSize": 12, "domainColor": "#C6CAD1", "domainWidth": 1, "labelAngle": 0, "labelColor": "#999999", "labelPadding": 6, "labelOverlap": "parity", "labelSeparation": 0, "grid": true, "gridDash": [ 0, 0 ], "tickSize": 0, "tickWidth": 1, "tickColor": "#999999", "title": "Date" }, { "orient": "left", "scale": "y", "titleColor": "#333333", "titlePadding": 13, "titleFontSize": 12, "domainColor": "#C6CAD1", "domainWidth": 1, "labelAngle": 0, "labelColor": "#999999", "labelPadding": 2, "labelOverlap": false, "labelSeparation": 0, "grid": true, "gridDash": [ 0, 0 ], "tickSize": 0, "tickCount": 5, "tickWidth": 1, "tickColor": "#999999", "title": "Sales ($)", "formatType": "number", "format": "$2s" } ], "marks": [ // { // "type": "rule", // "encode": { // "update": { // "x": {"scale": "x", "signal": "indexDate", "offset": 0.5}, // "y": {"value": 0}, // "y2": {"field": {"group": "height"}}, // "stroke": {"value": "blue"} // } // }, // }, { "type": "group", "markType": "group", "from": { "facet": { "name": "series", "data": "tableFold", "groupby": "_foldValue" } }, "marks": [ { "name": "mainLine", "type": "line", "markType": "main", "from": { "data": "series" }, "encode": { "enter": { "x": { "scale": "x", "field": "date" }, "y": { "scale": "y", "field": "sales" }, "stroke": { "scale": "color", "field": "_foldValue" }, "interpolate": { "value": "linear" }, "strokeWidth": { "value": 2 }, "strokeDash": { "value": [ 0, 0 ] }, } } }, { "name": "points_on_line", "from": {"data": "series"}, "type": "symbol", "encode": { "update": { "fill": {"value": "transparent"}, "size": {"value": 10}, "stroke": {"value": "transparent"}, "strokeWidth": {"value": 0.5}, "x": {"field": "date", "scale": "x"}, "y": {"value": 0} } } }, { "name": "points_voronoi", "type": "path", "from": {"data": "points_on_line"}, "encode": { "update": { "opacity": {"value": 0}, "fill": {"value": "transparent"}, "strokeWidth": {"value": 0.35}, "stroke": {"value": "red"}, "strokeOpacity": {"value": 1}, "isVoronoi": {"value": true}, "tooltip": {"signal": "signal_highligtedpoint"} } }, "transform": [ { "type": "voronoi", "x": "datum.x", "y": "datum.y", "size": [{"signal": "width"}, {"signal": "height"}], } ] }, { "from": {"data": "highlightedPoint"}, "type": "symbol", "interactive": false, "encode": { "update": { "x": {"scale": "x", "field": "date"}, "y": {"scale": "y", "field": "sales"}, "stroke": { "scale": "color", "field": "_foldValue" }, "strokeWidth": {"value": 4}, "fill": {"value": "white"}, "size": {"value": 150}, "strokeOpacity": {"value": 0.3}, } } }, { "from": {"data": "highlightedPoint"}, "type": "rule", "encode": { "update": { "x": {"scale": "x", "field": "date"}, "y": {"value": 0}, "y2": {"signal": "height"}, "stroke": {"value": "blue"} } }, } ] } ], "title": { "orient": "top", "align": "left", "anchor": "start", "angle": 0, "baseline": "alphabetic", "color": "#333333", "dx": 0, "dy": 0, "fontSize": 16, "fontWeight": "bold", "offset": 0, "text": "Sales by state" }, "legends": [ { "title": "", "titleFontSize": 16, "orient": "right", "direction": "vertical", "rowPadding": 8, "padding": 10, "symbolType": "circle", "symbolSize": 30, "symbolStrokeWidth": 0, "labelFontSize": 11, "encode": { "symbols": { "name": "legendSymbol", "fill": { "value": "transparent" }, "strokeWidth": { "value": 2 }, "size": { "value": 64 } }, "labels": { "name": "legendLabel" } }, "fill": "color" } ] }The text was updated successfully, but these errors were encountered: