JSCharting 3.0

Adds new Venn chart type and support for RTL (right-to-left) languages.
October 28, 2020 - 12:16
New Version


  • 50+ New Tuned Examples - Includes over fifty new and highly tuned real-world samples which can be used like chart templates to accelerate your custom data visualizations.
  • RTL Text Support - JSCharting now offers full right-to-left language support. The chart will automatically apply this feature when a culture string is defined.
  • Chart Wide Performance Improvements - Chart performance has been enhanced across all chart types and interactions.
  • Chart Mentoring, Tips and Suggestions - If the debug: true chart option is set, the chart will attempt to detect common chart issues and suggest solutions.
  • JSC.sortBy() Utility Function - Added a built-in sorting utility function to make sorting data points quick and easy.
  • DataGrid Title - A title can be added to data grids.
  • Export Events - beforeExport and afterExport events have been added, enabling customization and configuration of charts for export and printing.


  • Venn Series Type
    • Venn and Euler Diagrams - A new Venn and Euler diagram chart type has been added. You can use this chart by setting the type: 'venn' chart option. The series data used determines whether a Venn or Euler diagram is drawn. An additional point.sets property is available to define Venn data.
    • Automatic Color Blending - By default, Venn diagram data points that are made up of two or more overlapping shapes will inherit a blend of the underlying colors.
  • Alternate point color (point.altColor) - An alternative point color option has been added to provide more flexibility with how data points are visualized. This is supported in the following usage cases:
    • Secondary color for activity rings when they overlap - Circular column gauges (activity rings) alter in hue when rings overlap. This option can be used to disable this color change with: point.altColor: 'currentColor'. Or to customize a color shift when rings begin to overlap.
    • Control Candlestick Alternate Color - The alternate color used by candlesticks when close price is below open price can be modified or disabled using this option.
    • Colored OHLC Bars (defaultPoint.altColor) - Similar to candlesticks, OHLC bar data points can now use an alternate color when the point closes lower. Setting the point.altColor property is required for this option.
    • Label Stroke (label.outline) - All chart labels now support an outline option. Whenever labels become difficult to read because they blend into a background color, you can apply a label outline to ensure the labels have plenty of contrast.
    • Post Animation Update Callback (updateOptions.then) - This option provides a way to continually update a chart with animation without compromising performance on slower machines or sacrificing update speed on more robust client devices.


  • Data Visual Highlighting (by muting others) - Point and series highlighting is automatically enabled when hovering legend entries and point axis ticks. It is also available when hovering data points, but not automatically enabled except with Venn chart type.
  • 3 Highlighting Modes - Three highlighting modes are now available and can be used with any objects:
    • highlightSeries - Mutes all data except the points of the series being hovered.
    • highlightPoint - Mutes all data except the hovered point.
    • highlightPointGroup - Mutes all data except the point group being hovered. A point group refers to points across all series that share the same x value or name.
  • Point Selection Modes - Point selection can now be configured with a number of options:
    • 'auto' - (Default) Uses single or multiple selection mode while CTRL (command on a Apple Mac) is pressed.
    • 'single' - Only one point is selected at a time.
    • 'multiple' - Multiple points can be selected at a time. Click points again to deselect.
    • { max: 3 } - Specify an arbitrary number of points at a time using FIFO (first in, first out) logic. Clicking a point beyond the maximum number will select the new point and deselect the first point selected.
  • New Data Selection Events - Two new selection events have been added to make reacting to data selection simpler in many scenarios. These events are debounced in case selection occurs programmatically and repeatedly to ensure they are not triggered more often than necessary. As a result, there is a minor (30ms) delay between selection and when the events are triggered.
    • pointSelectionChanged - The pointSelectionChanged event is triggered when selected points change. The handler is called with a list of currently selected points passed as the argument.
    • seriesSelectionChanged - The seriesSelectionChanged event handler is triggered when the series selected state changes. The list of selected series is passed as an argument.
  • Legend Checkbox - The legend checkbox is now integrated into the chart as an option. Checkbox behavior can be modified for series and points, and custom checkbox behaviors can be implemented for all types of legend entries.
  • Solid series and point states
    • Point/Series selected and muted properties - You can now set point or series selected and muted states programmatically to implement customized behavior for many edge case scenarios.
    • Simplified State Settings - Some state settings have been simplified making it more convenient to control state visuals.

Axis Features

  • Simpler Additional Axis Logic - Adding extra axes is simplified in this release, axes now sync with the main axis automatically.
  • Arbitrary Axes on Charts - When you add extra axes with scale_range: [low, high] setting, the axis will not be synced to any scales. You can then specify an interval to draw gridlines and ticks for any custom purpose.
  • Scale range padding and min or max - You can now set the axis scale padding for one side, while locking the other side of the scale. This will prevent the padded side from snapping to axis ticks and will keep the data an even distance from the edge while a static minimum or maximum value is applied.
  • Axis Tick Enhancements
    • Closest point gets the tick - Consider this setting:
      • defaultSeries_lastPoint_yAxisTick_label_text: '%name'.
      • It marks the last point of each series on the y axis. A number of last points might end at this same y axis position. JSCharting will display the point that is closest to the axis. As a result, if you move the axis to the other side with setting yAxis_orientation:'opposite', you may have different points shown on the axis.
    • Click, mouseOver, mouseOut events - General axis tick events have been added so that interactivity can be implemented for any ticks on a chart. This is especially useful when axis ticks are bound to data points where point axis ticks can behave like legend entries.
    • Highlighting on Point Axis Tick hover with hoverAction options - One legend entry type behavior is now automatically used with point axis ticks. If you hover these ticks, it highlights the related series. In addition, you can use the axis tick hoverAction property to control the highlighting behavior. Setting false disables it, while 'highlightSeries', 'highlightPoint', 'highlightPointGroup' defines what will be highlighted on hover.
  • Tooltip Improvements
    • Better positioning - Implemented significant enhancements to the tooltip positioning system. Tooltips are now more aware of the items around them and the target point.
    • followCursor - Some scenarios where points are bunched together (such as on maps or heatmaps), offer no good positions for tooltips to show. A followCursor mode has been added to give the user more control in these scenarios. Users can adjust tooltip positions by simply moving the cursor. This mode is set automatically for series types including organizational, map, and heatmap charts.


  • Events inside labels - You can add multiple icon buttons to point label text and perform different operations based on the clicked icon.
  • General UIItem Event Improvements - A number of general uiItem event enhancements have been added, making events more consistent and reliable.
  • Point Cursor Setting - The cursor can now be set for individual data points providing more detailed control over desktop interactions.
  • UIItem Slider Debounce Option - As an alternative to the slider throttle option, the debounce feature will prevent the slider update event from executing until a specified number of milliseconds has lapsed without any further updates. This can be more effective than throttle in smoothing slider action when your updates are more CPU intensive.
Adds Venn chart type.


Stunning JavaScript charts and Data Visualizations for your website and web applications.

Got a Question?

Live Chat with our JSCharting licensing specialists now.