Icons

Chart Tutorials  

Icons

Icons usage and available icons library.

🔗System icons

There are a number of system icons that are bundled with JSCharting including generic system specific icons. For example, iOS and android both have export icons with the same meaning, but different visuals.

The bundle includes these icons for the following OS'es:

  • iOS
  • Android
  • Windows Phone
  • Default
Figure 1.
OS specific export icons

The export icon will automatically display a version that correspond to the end users OS.

Figure 2.
All system icons listed below
  • system/android/export
  • system/default/check
  • system/default/checkbox
  • system/default/checkbox_blank
  • system/default/close
  • system/default/expand-less
  • system/default/expand-more
  • system/default/export
  • system/default/jpg
  • system/default/pdf
  • system/default/png
  • system/default/svg
  • system/default/print
  • system/default/radio_button
  • system/default/radio_button_blank
  • system/default/settings
  • system/default/play
  • system/default/pause
  • system/default/add
  • system/default/remove
  • system/default/toggle_off
  • system/default/toggle_on
  • system/default/zoom/arrow_down
  • system/default/zoom/arrow_left
  • system/default/zoom/arrow_right
  • system/default/zoom/arrow_up
  • system/default/zoom/zoom_out
  • system/default/info
  • system/ios/export
  • system/winphone/export

🔗3rd Party Library

Also included is a vast collection of 3rd party icon libraries located under the JSC/ folder that can be referenced in script tags. When they are referenced, they will be accessible through the icon.name property.

🔗Icons Browser

The icons browser can be used to find or browse the available icons library. When an icon is clicked, the path for the icon is shown at the top. This path can be used to specify the selected icon in chart configuration.

Figure 3.
The icons browser interface.

When using icons, the chart will add a note to console that specifies the icon can be added to the page in a <script> tag like so:

<script type="text/javascript"
src="../JSC/icons/material/hardware/keyboard-arrow-left.js"></script>

If many icons from the same category are used, it is best to include them all as one file like so:

<script type="text/javascript"
src="../JSC/icons/material/hardware/all.js"></script>
Setting debug configuration option to false will disable these warning messages.

🔗Custom

In addition to the predefined icons, a custom icon can also be used by setting the icon.path property with an SVG path string. The chart will handle any resizing and other manipulation as needed.

🔗Using custom icons

  • Use custom paths with closed shapes which terminate with a 'z' character.
  • Multiple paths can be combined by simply concatenating them into a single path string.
Do not use paths with overlapping shapes.

🔗Icon Features

Common styling features such as fill, outline, margins, and sizing are all available with icons.

🔗Outer Shape

The icon.outerShape property can be set with a chart markerType such as circle square etc. This will modify the icon by cutting the icon path out of the outer shape. The padding property provides control over the spacing between the icon and outer shape.