Gauge Chart

Modified on Wed, 13 Apr 2022 at 09:45 AM

This article is outdated, you can access the most current version here: https://doc.onedata.de/apps/apps-docs/odml-documentation/AppBuilder/elements/HighchartsElement.html#type-highcharts  


This is a sample configuration for a Gauge Chart in Apps. The datasource used in this example can be found here.


    {
      "id": "gaugeChart",
      "type": "highcharts",
      "source": "raw_testSource",
      "config": {
        "title": {
          "text": "Solid gauge"
        },
        "exporting": {},
        "chart": {
          "type": "solidgauge"
        },
        "pane": {
          "center": [
            "50%",
            "85%"
          ],
          "size": "140%",
          "startAngle": "-90",
          "endAngle": "90",
          "background": {
            "backgroundColor": "#EEE",
            "innerRadius": "60%",
            "outerRadius": "100%",
            "shape": "arc"
          }
        },
        "tooltip": {
          "enabled": true
        },
        "yAxis": {
          "title": {
            "y": -70
          },
          "stops": [
            [
              0.1,
              "#66CC00"
            ],
            [
              1.0,
              "#BFE600"
            ],
            [
              1.5,
              "#E6E600"
            ]
          ],
          "min": 0,
          "max": 10,
          "lineWidth": 0,
          "minorTickInterval": null,
          "tickPixelInterval": 400,
          "tickWidth": 0,
          "labels": {
            "y": 16
          }
        },
        "plotOptions": {
          "solidgauge": {
            "dataLabels": {
              "y": 10,
              "borderWidth": 0,
              "useHTML": true
            }
          },
          "series": {
            "animation": false
          }
        },
        "series[0]": {
          "dataLabels": {
            "format": "<div style=\"text-align:center\"><span style=\"font-size:25px\">
                       {y}</span><br/><span style=\"font-size:12px;opacity:0.4\">km/h</span>
                      </div>"
          }
        },
        "series": [
          {
            "name": "Berlin",
            "turboThreshold": 0
          }
        ]
      }
    }
            
 



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article