Aneesh Kurup
Reputation: 9
How to set the width of this vega lite chart(tried width: 'container' but no use)
Trying to plot the vega lite graph similar to grouped bar chart, but facing some issue related to the size.
Could you please help me to understand where it is failing ?
Referred this https://discuss.elastic.co/t/vega-bar-chart/283578 article to create the below sample code
Sharing sample code used for this
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"transform": [
{`enter code here`
"fold": [
"precision",
"recall"
]
}
],
"data": {
"name": "table",
"values": [
{
"created": "2022-01-07",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-10",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-11",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 0,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-12",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 2,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-13",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-14",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 3,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-17",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 8,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-18",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 1,
"visit_failed": 0,
"pending": 2,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-19",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 2,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-20",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-01-21",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 5,
"precision": 0,
"recall": 0,
"error": 1
},
{
"created": "2022-01-24",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 2,
"precision": 0,
"recall": 0,
"error": 2
},
{
"created": "2022-01-25",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 9,
"precision": 0,
"recall": 0,
"error": 2
},
{
"created": "2022-01-27",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 2,
"visit_failed": 0,
"pending": 2,
"precision": 1,
"recall": 1,
"error": 0
},
{
"created": "2022-01-28",
"survival_success": 100,
"survival_failed": 0,
"visit_success": 1,
"visit_failed": 1,
"pending": 0,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-02-01",
"survival_success": 100,
"survival_failed": 0,
"visit_success": 3,
"visit_failed": 0,
"pending": 2,
"precision": 1,
"recall": 1,
"error": 1
},
{
"created": "2022-02-02",
"survival_success": 50,
"survival_failed": 50,
"visit_success": 0,
"visit_failed": 2,
"pending": 1,
"precision": 0,
"recall": 0,
"error": 1
},
{
"created": "2022-02-03",
"survival_success": 0,
"survival_failed": 100,
"visit_success": 1,
"visit_failed": 0,
"pending": 0,
"precision": 1,
"recall": 1,
"error": 3
},
{
"created": "2022-02-04",
"survival_success": 100,
"survival_failed": 0,
"visit_success": 1,
"visit_failed": 0,
"pending": 3,
"precision": 1,
"recall": 1,
"error": 0
},
{
"created": "2022-02-07",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 2,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-02-08",
"survival_success": 100,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 2,
"pending": 2,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-02-09",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"precision": 0,
"recall": 0,
"error": 0
},
{
"created": "2022-02-10",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 7,
"precision": 0,
"recall": 0,
"error": 4
},
{
"created": "2022-02-11",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 1,
"visit_failed": 2,
"pending": 10,
"precision": 1,
"recall": 1,
"error": 0
},
{
"created": "2022-02-14",
"survival_success": 0,
"survival_failed": 0,
"visit_success": 1,
"visit_failed": 0,
"pending": 0,
"precision": 1,
"recall": 1,
"error": 3
},
{
"created": "2022-02-15",
"survival_success": 100,
"survival_failed": 0,
"visit_success": 1,
"visit_failed": 0,
"pending": 0,
"precision": 1,
"recall": 1,
"error": 0
},
{
"created": "2022-02-16",
"survival_success": 0,
"survival_failed": 100,
"visit_success": 5,
"visit_failed": 7,
"pending": 4,
"precision": 0.8333333333333334,
"recall": 1,
"error": 0
},
{
"created": "2022-02-18",
"survival_success": 57.14285714285714,
"survival_failed": 42.857142857142854,
"visit_success": 8,
"visit_failed": 11,
"pending": 8,
"precision": 1,
"recall": 1,
"error": 0
},
{
"created": "2022-02-22",
"survival_success": 45.45454545454545,
"survival_failed": 54.54545454545454,
"visit_success": 7,
"visit_failed": 9,
"pending": 12,
"precision": 0.6,
"recall": 1,
"error": 10
},
{
"survival_success": 80,
"survival_failed": 20,
"visit_success": 5,
"visit_failed": 3,
"pending": 3,
"error": 0,
"precision": 0.7142857142857143,
"recall": 1,
"created": "2022-02-24"
},
{
"survival_success": 25,
"survival_failed": 75,
"visit_success": 3,
"visit_failed": 1,
"pending": 2,
"error": 1,
"precision": 1,
"recall": 1,
"created": "2022-02-25"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 0,
"error": 1,
"precision": 0,
"recall": 0,
"created": "2022-03-04"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 0,
"error": 2,
"precision": 0,
"recall": 0,
"created": "2022-03-09"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 4,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-03-10"
},
{
"survival_success": 83.33333333333334,
"survival_failed": 16.666666666666664,
"visit_success": 4,
"visit_failed": 2,
"pending": 4,
"error": 2,
"precision": 1,
"recall": 1,
"created": "2022-03-11"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"error": 1,
"precision": 0,
"recall": 0,
"created": "2022-04-20"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"error": 1,
"precision": 0,
"recall": 0,
"created": "2022-04-21"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"error": 3,
"precision": 0,
"recall": 0,
"created": "2022-04-25"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 2,
"error": 2,
"precision": 0,
"recall": 0,
"created": "2022-04-26"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 7,
"error": 5,
"precision": 0,
"recall": 0,
"created": "2022-04-27"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 3,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-04-28"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 9,
"error": 1,
"precision": 0,
"recall": 0,
"created": "2022-04-29"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 3,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-02"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-04"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 3,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-06"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 6,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-09"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 21,
"error": 15,
"precision": 0,
"recall": 0,
"created": "2022-05-13"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 3,
"pending": 15,
"error": 1,
"precision": 0,
"recall": 0,
"created": "2022-05-16"
},
{
"survival_success": 100,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 1,
"pending": 29,
"error": 5,
"precision": 0,
"recall": 0,
"created": "2022-05-17"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 20,
"error": 5,
"precision": 0,
"recall": 0,
"created": "2022-05-18"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 3560,
"error": 3085,
"precision": 0,
"recall": 0,
"created": "2022-05-19"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1656,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-20"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-21"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 4,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-22"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 3,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-23"
},
{
"survival_success": 0,
"survival_failed": 0,
"visit_success": 0,
"visit_failed": 0,
"pending": 1,
"error": 0,
"precision": 0,
"recall": 0,
"created": "2022-05-24"
}
]
},
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"column": {
"field": "created",
"timeUnit": "yearmonthdate",
"type": "ordinal",
"header": {
"labelOrient": "bottom",
"labelAngle": 60,
"labelPadding": 30,
"labelAlign": "left"
},
"title": "Time Range",
"spacing": 20
},
"x": {
"field": "key",
"type": "ordinal",
"axis": null
},
"y": {
"field": "value",
"type": "quantitative",
"title": "Value(%)",
"aggregate": null,
"format": ".2f"
},
"color": {
"field": "key",
"type": "nominal",
"scale": {
"range": [
"#675193",
"#ca8861"
]
},
"title": "Performance Metrices",
"legend": {
"orient": "top",
"padding": 20,
"labelExpr": "upper(datum.label)"
}
}
},
"config": {
"axis": {
"grid": false
},
"view": {
"stroke": "transparent"
}
}
}
Upvotes: 0
Views: 1138
Answers (1)
Stas S
Reputation: 1042
In case of discrete domain, rather than specifying width for the whole chart, you need to specify width of each bar instead:
"width": {"step": 5},
Then whole width of the chart would be number_of_bars * bar_width
Open the Chart in the Vega Editor
If you're looking for dynamic/responsive width (either by setting "width": "container" or "autosize": "fit-x"), unfortunately I believe vega doesn't support it for faceted charts.
Upvotes: 1
Related Questions
- How can I add like a textbox with longer text to a chart in vega-lite?
- Scaling x-axis to fit the box in vega lite
- Vega-lite: line mark not consistent in overview+ detailed responsive chart
- Adding Axis padding/inner margin to Vega-Lite chart
- How to do I alter code so chart will display?
- Vega-lite: the bar chart is too thin when x channel is a fieldT, how can align it better and adjust width or padding?
- Vega-lite: Why does graph width affect how the axis labels are formatted?
- Vega-lite default bar width strange
- How to make a Tick the same width as a Bar
- Vega chart - how to make the chart responsive