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.

enter image description here

If i use format ("format":"0.3f") then it looks like a repetitive value on the y-axis enter image description here

The desired view i need is only with 3 decimal values after point and non repetitive.

enter image description here

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 ??

Editor link


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:

    enter image description here

    {
      "$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"}
    }