(View complete release timeline)

Version 2.8 is one of our most significant releases to date. The JSCharting team focused its energies innovating the chart axes, accessibility support, a seamlessly integrated data grid control and many more additions. We are excited to present these new features and look forward to seeing what our clients will be able to accomplish with them!

Re-imagining the Axis

Axis Range Ticks

‘Range ticks’ may sounds contradictory at first, but are a powerful new addition for axis labeling. Axis ticks traditionally refer to a specific point on an axis scale; however, now have gained the ability to define a range. Simply specify an array of two numeric values in place of a single numeric tick value to enable the range axis tick visualization. Range ticks can display with three different visualization styles and will select the optimal mode automatically while also allowing for manual configuration.

AxisTick CalendarPattern Values

Combining CalendarPatterns with axis range ticks provides a new and compelling way to visualize time scales. Enabling range ticks to be automatically drawn for every month, quarter, year (or any other interval) is as simple as adding one line of code!

AxisMarker CalendarPattern Values

CalendarPatterns are a powerful shorthand API enabling you to define complex date patterns (such as rules for national holidays) or interval based patterns (such as weekends). These patterns can now be specified as axis marker values to mark important dates that may correlate with your data.

Category Scale Names == Ranges

JSCharting v2.8 introduces a new concept for category scales. String category names no longer refer to a single point on an axis, but rather a range. AxisTicks and AxisMarkers now accept either category name values or two category names that refer to a range that encompasses both categories.

Logarithmic Scale Improvements

Logarithmic scales now support zero and negative values. In addition, exponent format string ‘t’ support is now available to shorten the large numeric axis values that often appear in logarithmic scales.

Point Axis Ticks

This feature automates complex coding tasks through a very simple API. A xAxisTick or yAxisTick property can be set directly on any data point (or the default) configuration object which adds an axis tick bound to point itself. The value of this tick will automatically be set to the point value and the tick label includes seamless support for point tokens that describe the point.

The example on the right is achieved with this simple code:

{

x:'10/20/2020',

y: 176,

yAxisTick:{label_text:'%icon %seriesName %yvalue'}

}

Axis.caOffset property

The addition of range tick visualizations introduce a powerful new tool to describe sections of a scale. An axis that includes these visuals can now be positioned inside the ChartArea (negative px offset) or to a specific position outside the ChartArea (positive px offset) to gain more control of range and value tick layout.

Axis Number Shortening and Magnitude Formatting

Large numeric values, which take time to read accurately, waste a lot of screen real estate.. Now, the axis can automatically shorten these values so that 56,000 turns into 56 k, 1,000,000 becomes 1M and so on. This formatting option is also available as the ‘a’ format string and can be used with any labels outside the axis. When a number is added to the format string such as ‘a2’, it refers to a specific magnitude.

See more axis features in our axis gallery section.

Introducing the Datagrid

Version 2.8 introduces a powerful and tightly integrated data grid that binds to JSCharting charts and also acts as a stand-alone grid connected directly to your data.

Microchart and Icon Syntax

The simple syntax that allows microcharts to be added to any label on a chart is also supported in data grid cells. In addition, JSC’s icon syntax provides access to the full library of icons for seamless usage in data grid cells.

Token Formatting and Expressions

The same formatting and expressions syntax supported within chart labels can now be used to define data grid column values.

Chart to Datagrid

An existing chart can show an alternative data grid of the charted data by simply setting the datagrid_enabled config option to true. A chart can also populate any div on the page with its data using the chart.toGrid(‘divId’) function.

Export to CSV

When the datagrid CSV export option is enabled, a convenient button is generated that will save the data as a CSV file on the client’s computer.

Tooling Harmony and Automation

The recent enhancements and support for delimiter separated value formats such as CSV can now plug directly into stand-alone data grids. This powerful combination can automatically detect CSV headers and interpret data to display the results as intended without intervention or additional manual settings.

See data grid examples in our gallery.

More Features

Accessibility

When accessibility is a company-wide requirement, JSCharting offers an uncompromising solution. Whether your organization must comply with section 508 or WCAG 2.0, you now have access to all the options to enable and control your chart accessibility experience. In addition, color palettes optimized for color impaired viewers have been added to further enhance accessibility regardless of the specific form of color impairment.

Gantt Dependencies

The advanced Gantt chart capability of JSCharting is now even more powerful. Project task dependencies for critical path analysis can now be visualized on Gantt charts. Starting tasks can be set to depend on the completion of another task or a number of other tasks as a group.

Line Caps

Line caps add deeper meaning and context to ordinary lines by communicating line direction, colors and symbols. Line Caps are automatically set to enhance visualizations such as Gantt dependencies and range ticks and can also be set for other lines on the chart (even on line series).

Superscript and Subscript

Superscript and subscript text is useful for many advanced labeling needs and avoids having math equations or numeric values written as 10⁵. Both superscript and subscript html tags can now be used with any labels in JSCharting and will correctly render as SVG text.

Updated Microchart Styling and Options

Microcharts have been enhanced with a clean and modern look.. Additionally, a rotate option has been introduced which is useful for custom fit and rotation requirements as well as rendering microcharts stacked horizontally or vertically across axis ticks.

Other