Description

The minimalism configuration in this article works for the chart types "line", "bar" and "column".

This can most easily be changed in the JSON editor within APPS by altering the chart.type property in the element configuration object:

  "chart": { 
    "type""bar" / "line" / "column"
 }


Most changes can easily be applied over the JSON with the property:

  "enabled": false or true

at the respective position:

  • Axes:
    • X axis is en/disabled at: xAxis > visible: true/false AND config > legend: true/false
    • Y axis is en/disabled at: yAxis > visible: true/false
    • visible enables the whole axis and legend enables the marker on the axis

Everything that can be displayed is set to "false" and can be enabled again when set to "true".


Currently APPS displays the data dots at the graph, although they are not displayed when configured within the Highcharts-Editor.


Picture and Configuration


In APPS: 

 


In the Highcharts-Editor are no data dots in the graph unlike in APPS (Bar and column chart look the same as in APPS): 

 



JSON for Highchart element

    {
      "id": "chartVis",
      "type": "highcharts",
      "source": "raw_testSource",
      "config": {
        "title": {
          "text": "",
          "style": {
            "fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\", 
                           Verdana, Arial, Helvetica, sans-serif",
            "color": "#333333",
            "fontSize": "8px",
            "fontWeight": "normal",
            "fontStyle": "normal"
          }
        },
        "subtitle": {
          "text": "",
          "style": {
            "fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\",
                           Verdana, Arial,Helvetica, sans-serif",
            "color": "#666666",
            "fontSize": "8px",
            "fontWeight": "normal",
            "fontStyle": "normal"
          }
        },
        "exporting": {
          "enabled": false
        },
        "chart": {
          "type": "line",
          //tested for line-, bar- and column charts
          "style": {
            "fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\",
                           Verdana, Arial, Helvetica, sans-serif",
            "color": "#333",
            "fontSize": "8px",
            "fontWeight": "normal",
            "fontStyle": "normal"
          },
          "borderColor": "",
          "plotBorderColor": ""
        },
        "series": [
          {
            "name": "Berlin",
            "color": "#2196f3"
          }
        ],
        "plotOptions": {
          "series": {
            "dataLabels": {
              "enabled": false,
              "style": {
                "color": "",
                "fontSize": "",
                "fontWeight": "",
                "textOutline": ""
              }
            }
          },
          "line": {
            "dataLabels": {
              "defer": false,
              "crop": false
            },
            "tooltip": {
              "animation": false,
              "enabled": false
            },
            "allAreas": true,
            "color": "",
            "enableMouseTracking": false,
            "stickyTracking": false
          }
        },
        "yAxis": {
          "title": {
            "text": "",
            "style": {
              "fontFamily": "\"Lucida Grande\", \"Lucida Sans Unicode\",
                             Verdana, Arial, Helvetica, sans-serif",
              "color": "#666666",
              "fontSize": "8px",
              "fontWeight": "normal",
              "fontStyle": "normal"
            }
          },
          "labels": {
            "format": ""
          },
          "reversedStacks": false,
          "showLastLabel": false,
          "visible": false
        },
        "colors": [
          "#7cb5ec"
        ],
        "xAxis": {
          "crosshair": {
            "label": {
              "style": {
                "color": "white",
                "fontWeight": "normal",
                "fontSize": "11px",
                "textAlign": "center"
              }
            },
            "color": "",
            "snap": false
          },
          "labels": {
            // true for xAxis (Has to be combined with true for visible property)
            "enabled": false
          },
          "scrollbar": {
            "enabled": false,
            "showFull": false
          },
          "title": {
            "reserveSpace": false
          },
          "gridLineColor": "",
          "lineColor": "",
          "minorGridLineColor": "",
          "minorTickColor": "",
          "visible": false // true for gap marker on xAxis
        },
        "legend": {
          "enabled": false
        }
      },
      "tooltip": {
        "enabled": false
      },
      "credits": {
        "enabled": false
      },
      "pane": {
        "background": []
      },
      "responsive": {
        "rules": []
      }
    }


Related Articles

Integration of Highcharts

Labels in Highcharts

Design Area Range and Line Charts

Data Separator within a Chart