Design miminalistic Highcharts

Modified on Thu, 30 Dec 2021 at 10:06 AM

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": []
      }
    }

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