jsonvisualizationvega-litevegavega-lite-api
y axis scale ticks for small decimal value in Vegalite
I am trying to create a chart in vegaLite having dual axis. Issue is that, the second y axis value are in decimal, if i do not use format for second y axis, then it simply makes format with 4 decimal digits. But i need upto 3 decimal digits after the point.
If i use format ("format":"0.3f") then it looks like a repetitive value on the y-axis
The desired view i need is only with 3 decimal values after point and non repetitive.
i am setting maxDomain second y axis values on the basis of dynamic data values (10% extra of max value of the field. It is dynamically pre calculatd ) without use of values:[] . how ??
Solution
Your domainMax isn't large enough. Why would your domain show 0.002 when your domainMax only goes to 0.0011?
Try adding a tickCount and increasing your domainMax:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"background": {"expr": "BackgroundCanvasColor"},
"config": {
"axis": {
"labelFontStyle": {"expr": "AxisLabelFontStyle"},
"titleFontStyle": {"expr": "AxisTitleFontStyle"}
},
"font": {"expr": "FontType"},
"legend": {
"labelFontStyle": {"expr": "LegendLabelFontStyle"},
"labelLimit": {"expr": "LegendLabelLimit"},
"layout": {"top": {"anchor": "midivisionle"}},
"orient": {"expr": "LegendOrient"},
"symbolSize": {"expr": "LineLegendSymbolSize"},
"symbolType": {"expr": "LineLegendSymbol"}
},
"title": {
"fontStyle": {"expr": "TitleFontStyle"},
"subtitleFontStyle": {"expr": "SubtitleFontStyle"}
}
},
"data": {
"values": [
{"description_data": "ROW1", "division": 3, "subdivision": 0.001},
{"description_data": "ROW2", "division": 3, "subdivision": 0.001},
{"description_data": "ROW3", "division": 3, "subdivision": 0.001},
{"description_data": "ROW4", "division": 2, "subdivision": 0.001},
{"description_data": "ROW5", "division": 2, "subdivision": 0.001},
{"description_data": "ROW6", "division": 2, "subdivision": 0.001},
{"description_data": "ROW7", "division": 2, "subdivision": 0.001},
{"description_data": "ROW8", "division": 2, "subdivision": 0.001},
{"description_data": "ROW9", "division": 2, "subdivision": 0.001},
{"description_data": "ROW10", "division": 2, "subdivision": 0.001}
]
},
"params": [
{"name": "XAxisLabelAngle", "value": -45},
{"name": "YAxisLabelAngle", "value": 0},
{"name": "SubTitileColor", "value": "black"},
{"name": "TitleFontColor", "value": "black"},
{"name": "TitleFontSize", "value": 16},
{"name": "TitleAlign", "value": "center"},
{"name": "TitleText", "value": ""},
{"name": "TitleOrient", "value": "top"},
{"name": "TitleAnchor", "value": "midivisionle"},
{"name": "TitleBaseline", "value": "top"},
{"name": "TitleDx", "value": 0},
{"name": "SubtitleFont", "value": "bold"},
{"name": "TitleLimit", "value": 0},
{"name": "TitleOffset", "value": 5},
{"name": "Subtitle", "value": ""},
{"name": "SubtitleFontSize", "value": 16},
{"name": "MarkOpacity", "value": 1},
{"name": "XAxisPostion", "value": 0},
{"name": "YAxisPostion", "value": 0},
{"name": "YAxisTitle", "value": "division"},
{"name": "XAxisTitle", "value": "ROW"},
{"name": "YAxisLabelLimit", "value": 0},
{"name": "SecondYAxisLabelLimit", "value": 0},
{"name": "YAxisLabelSize", "value": 18},
{"name": "SecondYAxisLabelSize", "value": 17},
{"name": "XAxisLabelSize", "value": 17},
{"name": "XAxisLabelColor", "value": "black"},
{"name": "YAxisLabelColor", "value": "black"},
{"name": "SecondYAxisLabelColor", "value": "black"},
{"name": "XAxisTickSize", "value": 10},
{"name": "YAxisTickSize", "value": 10},
{"name": "SecondYAxisTickSize", "value": 4},
{"name": "BarLegendSymbolSize", "value": 0},
{"name": "LineLegendSymbolSize", "value": 0},
{"name": "YAxisTitleColor", "value": "black"},
{"name": "SecondYAxisTitleColor", "value": "black"},
{"name": "XAxisTitleColor", "value": "black"},
{"name": "YAxisTitleFontSize", "value": 18},
{"name": "SecondYAxisTitleFontSize", "value": 17},
{"name": "XAxisTitleFontSize", "value": 16},
{"name": "BarWidth", "value": 30},
{"name": "MarkShape", "value": "circle"},
{"name": "MarkShapeSize", "value": "50"},
{"name": "XAxisLabelLimit", "value": 0},
{"name": "YRangemax", "value": 3.3000000000000003},
{"name": "YRangemin", "value": null},
{"name": "SecondYRangemax", "value": 0.002},
{"name": "SecondYRangemin", "value": null},
{"name": "BarColor", "value": "#ffd4a3"},
{"name": "LineColor", "value": "#de3517"},
{"name": "PointInnerColor", "value": "#f54e24"},
{"name": "PointOuterColor", "value": "#f01919"},
{"name": "SecondYAxisTitle", "value": "SUB DIVISION VALUE"},
{"name": "LegendColumn", "value": 4},
{"name": "LegendLabelBaseline", "value": "midivisionle"},
{"name": "PointAngle", "value": 0},
{"name": "LegendLabelColor", "value": "#000000"},
{"name": "LegendLabelFontSize", "value": 14},
{"name": "LegendLabelLimit", "value": 0},
{"name": "LegendLabelOffset", "value": 25},
{"name": "LegendLabelOpicity", "value": "1"},
{"name": "LegendSymbolOpicity", "value": "0"},
{"name": "YAxisTitleX", "value": -40},
{"name": "BackgroundColor", "value": "#FFFFFF"},
{"name": "XAxisGridOpacity", "value": 0},
{"name": "YAxisGridOpacity", "value": 1},
{"name": "XAxisGridColor", "value": "#d3d3d3"},
{"name": "YAxisGridColor", "value": "#0d0c0c"},
{
"name": "BarLegendSymbol",
"value": "M1.75,1.5V1H0V.5H1.75V0h1.5V.5H5V1H3.25v.5Z"
},
{"name": "LineLegendSymbol", "value": "square"},
{"name": "LegendOrient", "value": "bottom"},
{"name": "FontType", "value": "Calibri"},
{"name": "TitleFontStyle", "value": "normal"},
{"name": "TitleFontWeight", "value": "normal"},
{"name": "SubtitleFontStyle", "value": "normal"},
{"name": "SubtitleFontWeight", "value": "normal"},
{"name": "AxisLabelFontStyle", "value": "bold"},
{"name": "AxisLabelFontWeight", "value": "normal"},
{"name": "AxisTitleFontStyle", "value": "bold"},
{"name": "AxisTitleFontWeight", "value": "normal"},
{"name": "LegendLabelFontStyle", "value": "normal"},
{"name": "BackgroundCanvasColor", "value": "#FFFFFF"}
],
"title": {
"align": {"expr": "TitleAlign"},
"anchor": {"expr": "TitleAnchor"},
"baseline": {"expr": "TitleBaseline"},
"color": {"expr": "TitleFontColor"},
"dx": {"expr": "TitleDx"},
"fontSize": {"expr": "TitleFontSize"},
"limit": {"expr": "TitleLimit"},
"offset": {"expr": "TitleOffset"},
"subtitle": {"expr": "Subtitle"},
"subtitleColor": {"expr": "SubTitileColor"},
"subtitleFontSize": {"expr": "SubtitleFontSize"},
"text": {"expr": "TitleText"}
},
"vconcat": [
{
"encoding": {
"scale": {"domain": {"param": "brush"}},
"sort": {"field": "id"},
"x": {
"axis": {
"grid": true,
"gridColor": {"expr": "XAxisGridColor"},
"gridOpacity": {"expr": "XAxisGridOpacity"},
"labelAngle": {"expr": "XAxisLabelAngle"},
"labelColor": {"expr": "XAxisLabelColor"},
"labelFontSize": {"expr": "XAxisLabelSize"},
"labelLimit": {"expr": "XAxisLabelLimit"},
"position": {"expr": "XAxisPostion"},
"tickSize": {"expr": "XAxisTickSize"},
"title": {"expr": "XAxisTitle"},
"titleColor": {"expr": "XAxisTitleColor"}
},
"field": "description_data",
"sort": {"field": "id"},
"type": "nominal"
}
},
"height": 200,
"layer": [
{
"encoding": {
"color": {
"datum": "",
"legend": {
"columns": {"expr": "LegendColumn"},
"labelBaseline": {"expr": "LegendLabelBaseline"},
"labelColor": {"expr": "LegendLabelColor"},
"labelFontSize": {"expr": "LegendLabelFontSize"},
"labelLimit": {"expr": "LegendLabelLimit"},
"labelOffset": {"expr": "LegendLabelOffset"},
"labelOpacity": {"expr": "LegendLabelOpicity"},
"orient": {"expr": "LegendOrient"},
"symbolOpacity": {"expr": "LegendSymbolOpicity"},
"symbolSize": {"expr": "BarLegendSymbolSize"},
"symbolType": {"expr": "BarLegendSymbol"}
},
"scale": {"range": [{"expr": "BarColor"}]}
},
"y": {
"axis": {
"gridColor": {"expr": "YAxisGridColor"},
"gridOpacity": {"expr": "YAxisGridOpacity"},
"labelAngle": {"expr": "YAxisLabelAngle"},
"labelColor": {"expr": "YAxisLabelColor"},
"labelFontSize": {"expr": "YAxisLabelSize"},
"labelLimit": {"expr": "YAxisLabelLimit"},
"position": {"expr": "YAxisPostion"},
"tickSize": {"expr": "YAxisTickSize"},
"title": {"expr": "YAxisTitle"},
"titleColor": {"expr": "YAxisTitleColor"},
"titleFontSize": {"expr": "YAxisTitleFontSize"},
"values": null
},
"field": "division",
"scale": {
"domainMax": {"expr": "YRangemax"},
"domainMin": {"expr": "YRangemin"},
"zero": false
},
"type": "quantitative"
}
},
"mark": {
"opacity": {"expr": "MarkOpacity"},
"tooltip": true,
"type": "bar",
"width": {"expr": "BarWidth"}
},
"params": [
{"name": "brush0", "select": {"encodings": ["x"], "type": "point"}}
]
},
{
"encoding": {
"color": {
"datum": "",
"legend": {"symbolStrokeColor": {"expr": "PointOuterColor"}},
"scale": {"range": [{"expr": "PointInnerColor"}]}
},
"y": {
"axis": {
"format": ".3f", "tickCount":2,
"grid": false,
"gridColor": {"expr": "YAxisGridColor"},
"gridOpacity": {"expr": "YAxisGridOpacity"},
"labelColor": {"expr": "SecondYAxisLabelColor"},
"labelFontSize": {"expr": "SecondYAxisLabelSize"},
"orient": "right",
"tickSize": {"expr": "SecondYAxisTickSize"},
"title": {"expr": "SecondYAxisTitle"},
"titleColor": {"expr": "SecondYAxisTitleColor"},
"titleFontSize": {"expr": "SecondYAxisTitleFontSize"}
},
"field": "subdivision",
"scale": {"domainMax": {"expr": "SecondYRangemax"}},
"sort": null,
"type": "quantitative"
}
},
"mark": {
"fill": "transparent",
"filled": true,
"point": {
"angle": {"expr": "PointAngle"},
"fill": {"expr": "PointInnerColor"},
"shape": {"expr": "MarkShape"},
"size": {"expr": "MarkShapeSize"},
"stroke": {"expr": "PointOuterColor"}
},
"stroke": {"expr": "LineColor"},
"tooltip": true,
"type": "line"
},
"params": [
{"name": "brush1", "select": {"encodings": ["x"], "type": "point"}}
]
}
],
"resolve": {
"scale": {
"color": "independent",
"shape": "independent",
"size": "independent",
"y": "independent"
}
},
"transform": [{"filter": {"param": "brush"}}],
"view": {"fill": {"expr": "BackgroundColor"}},
"width": "container"
},
{
"encoding": {
"color": {"value": "lightGray"},
"x": {
"axis": {"labels": false, "ticks": false, "title": ""},
"field": "description_data",
"sort": {"field": "id"},
"type": "nominal"
}
},
"height": 40,
"mark": {"opacity": 0, "type": "area"},
"params": [
{
"name": "brush",
"select": {"encodings": ["x"], "translate": true, "type": "interval"}
}
],
"width": "container"
}
],
"view": {"stroke": "transparent"}
}
- Deserialize Map<Enum<?>, Object> in Java with Jackson library
- get title from JSON
- Convert bash array to JSON and write to file
- Refused to execute script, strict MIME type checking is enabled?
- jQuery ajaxForm returning .json file
- .NET API Update Includes ID
- .NET 8 (isolated worker model) PUT/POST methods have null body
- How to deserialize a Map with custom value type in serde?
- cannot use operator[] with a string argument with array (parsing json)
- How to use `json` in Rocket?
- I'm trying to convert data from csv to json . My csv input is split by (;) is there an easy way to do so?
- How can I respond to a POST request containing JSON data with Rocket?
- Manipulate Result type with JSON as content
- Jolt Replacing substring within a string
- How to marshal a byte/uint8 array as json array in Go?
- Create new array using JSON results with JavaScript
- Wordpress API JSON return limit
- Vega chart center bar in dynamic number of columns
- Object serialization to json, certain fields only
- Using Python APIs to download data and make pandas
- Java android moshi parse Json to Object
- python + json file saving
- How to create rocket + sea orm correct json response?
- How do check for Some vs None in multiple nested enums at once?
- How to delete full object with javascript?
- How to return JSON as a response in Rocket 0.5?
- Import json-simple from Maven failed
- How to map this Json with rest template spring boot
- Jackson triggering JPA Lazy Fetching on serialization
- while using python web-scraping faced error