[Docs] Boxplot extend format.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
        "graphset": [{
          "type": "hboxplot",
          "background-color": "white",
          "plot": {
            "dataStationName": ["BARDUFOSS", "E6 HEIA", "DIVIDALEN II", "TAMOKDALEN", "SJUFJELLET", "BONES I BARDU"],
            "dataStationElevation": [69, 297, 391, 481, 484, 540]
          },
          "plotarea": {
            "margin": "dynamic"
          },
          "scale-x": {
            "zooming": true,
            "ranged": false,
            "label": {
              "text": "Altitude"
            },
            "format": "%v",
            "tick": {},
            "item": {
              "font-size": "14px"
            },
            "guide": {
              "lineWidth": 1,
              "visible": true
            },
            "minValue": 0,
            "maxValue": 600,
          },
          "scale-y": {
            "label": {
              "text": "Temp (Celsius)"
            },
            "ref-line": {
              "visible": true,
              "line-color": "darkgrey",
              "line-width": 1,
              "line-style": "solid"
            },
            "format": "%v C",
            "line-color": "darkgrey",
            "tick": {
              "line-color": "darkgrey"
            },
            "item": {
              "font-size": "14px"
            },
            "guide": {
              "visible": true
            }
          },
          "options": {
            "box": {
              "border-color": "black",
              "border-width": 1,
              "tooltip": {
                "paddingBottom": 5,
                "background-color": "darkgrey",
                "border-color": "lightgrey",
                "border-radius": 10,
                "text": "%data-station-name,  %data-station-elevation moh"
              }
            }
          },
          "series": [{
            "barWidth": 25,
            "url": "http://www.google.com",
            "target": "_blank",
            "data-box": [
              [69, 2, 3, 3.8, 4, 4.2],
              [297, 1, 2.2, 2.4, 3.1, 3.8],
              [391, 0.4, 0.766666651, 1.4, 1.73333335, 2.3],
              [481, 2.1, 2.7, 3.2, 3.7, 4.5],
              [484, -4.3, -3.8, -3.1, -2.26666665, -1],
              [540, 1.6, 2.5, 3.05, 3.6, 5.2]
            ]
          }]
        }]
      };

      // render chart
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        width: '100%',
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    "graphset": [{
      "type": "hboxplot",
      "background-color": "white",
      "plot": {
        "dataStationName": ["BARDUFOSS", "E6 HEIA", "DIVIDALEN II", "TAMOKDALEN", "SJUFJELLET", "BONES I BARDU"],
        "dataStationElevation": [69, 297, 391, 481, 484, 540]
      },
      "plotarea": {
        "margin": "dynamic"
      },
      "scale-x": {
        "zooming": true,
        "ranged": false,
        "label": {
          "text": "Altitude"
        },
        "format": "%v",
        "tick": {},
        "item": {
          "font-size": "14px"
        },
        "guide": {
          "lineWidth": 1,
          "visible": true
        },
        "minValue": 0,
        "maxValue": 600,
      },
      "scale-y": {
        "label": {
          "text": "Temp (Celsius)"
        },
        "ref-line": {
          "visible": true,
          "line-color": "darkgrey",
          "line-width": 1,
          "line-style": "solid"
        },
        "format": "%v C",
        "line-color": "darkgrey",
        "tick": {
          "line-color": "darkgrey"
        },
        "item": {
          "font-size": "14px"
        },
        "guide": {
          "visible": true
        }
      },
      "options": {
        "box": {
          "border-color": "black",
          "border-width": 1,
          "tooltip": {
            "paddingBottom": 5,
            "background-color": "darkgrey",
            "border-color": "lightgrey",
            "border-radius": 10,
            "text": "%data-station-name,  %data-station-elevation moh"
          }
        }
      },
      "series": [{
        "barWidth": 25,
        "url": "http://www.google.com",
        "target": "_blank",
        "data-box": [
          [69, 2, 3, 3.8, 4, 4.2],
          [297, 1, 2.2, 2.4, 3.1, 3.8],
          [391, 0.4, 0.766666651, 1.4, 1.73333335, 2.3],
          [481, 2.1, 2.7, 3.2, 3.7, 4.5],
          [484, -4.3, -3.8, -3.1, -2.26666665, -1],
          [540, 1.6, 2.5, 3.05, 3.6, 5.2]
        ]
      }]
    }]
  };

  // render chart
  zingchart.render({
    id: 'myChart',
    data: chartConfig,
    width: '100%',
  });
});