Webix 8.3: New Diagram, Updates for Scheduler, Gantt and Spreadsheet

I do not know how it is in your location, but in Webix motherland it is the coldest spring ever. Yet it really motivates to work hard and stay productive to deliver new features to our customers. Today we are glad to present a new complex widget, Webix Diagram, as well as new timeline and day units views for Scheduler, split tasks for Gantt and usability improvement for Spreadsheet.

Already impressed? Let’s proceed to learn about each update in detail.

New Diagram widget

The new Diagram widget comes to replace Webix Organogram in the long run and boasts a number of remarkable features that are likely to turn it into a best-seller.

View demo >>

Unlimited creativity

First and foremost you can build barely any diagram with this tool, make it bright and stylish:

  • Block diagram
  • Flow Chart
  • Organizational Chart
  • Decision Tree
  • UML Class and UML Activity diagrams
  • Network diagram
  • Venn diagram
  • Fishbone diagram
  • Just look at these samples, you will obviously like them!


    View demo >>

    Nice pictures are coupled with the powerful engine, so apart from placing blocks by custom coordinates, you can rely on the auto placement feature that will distribute data items according to science-proved algorithms.

    Webix Diagram can automatically place tree-like data to achieve standard organizational charts as well as arrange data with cyclic dependencies. The logic can also build diagrams with separate graphs that do not have a common root.

    All you need to do is provide data for blocks themselves and links between them, and Diagram will do all the hard work for you.

    SVG shapes and styling

    View demo >>

    In terms of styling even a smallest nuance is considered for your creativity and flexibility.

    First of all, Diagram blocks can be styled with CSS. There are presets for organizational chart items and text blocks alongside with a clear API to apply custom CSS styles.

    You can also define block shapes: rectangle, diamond, triangle, trapezoid, etc. You can choose from a wide range of preset SVG shapes as well as include your own ones.

    What’s more, you can provide stylistic defaults for shapes, namely background and line colors, rotation, text style and alignment. The same settings can be defined for each block separately to precisely tune the resulting diagram.

    Yet this is not the end! You can also configure links between blocks: define modes of linking, stylize them or paint them by custom coordinates. The same can be applied to link arrows as well.

    View demo>>

    Data API

    Webix Diagram features a standard loading API and allows to use JSON and XML data for blocks and links.

    For your convenience, you can use Webix standard data processing API with Diagram: perform all CRUD (create, read, update, delete) operations with data items as well as filter and sort them.

    Visual editor in roadmap

    We are already working on an ability to manually position and style diagram blocks in a user-friendly way. With Visual Editor your users will be able to drag-and-drop items, choose shapes and apply all the stylistic settings.

    But please be patient and expect the Visual Editor at the end of June as part of 8.4 release.


    The new Diagram widget is distributed outside of the Webix Core package and requires a license. You can learn about the terms and conditions as well as get a trial on the Pricing page.

    Timeline and Unit Views for Scheduler


    View code>>

    This is truly the most frequently asked feature since Scheduler first release 🙂 So here it is: a separate Timeline view that can be enabled by a single setting! Timeline can be browsed in three modes: day, week and month. The events themselves are grouped in lines that are arranged vertically.


    View demo >>

    Unlike Timeline, Units view allows you to organize groups within a day. In this view, each day can have several vertical sections where events are displayed side by side.

    Apart from visual features, we did a lot to stabilize patterns of recurring events as well as dynamic loading behavior. Thank you for your constant feedback and reports!

    Gantt: Split Tasks

    Split tasks

    View demo >>

    With Gantt 8.3 it is possible to display projects and tasks with subtasks in a single line thus splitting them into subsequent segments.

    Users can manually collapse and expand split tasks via a form as well as use drag-and-drop to create new task chunks right on the chart scale.


    Export of hidden rows and columns

    From now on you can export hidden rows and columns as is to Excel, which means that they will stay hidden in a resulting Excel file and can be shown back with Excel controls.

    As to PDF and CSV export, hidden rows and columns will just be skipped.

    Tuning legend and labels in built-in charts

    View code >>

    Spreadsheet charts get more and more settings with each new update. In this release we made it possible to fine tune chart legend as well as provide labels for each chart type.

    Currency symbol in a formatting window

    View code >>

    Starting from Spreadsheet 8.3 your users will be able to select a currency symbol when setting a price format to cells. By default the marks include the US dollar, Euro, Yuan, Portuguese real and Russian ruble. You can also provide a custom set of symbols through locale.

    The new reality requires us to perform video calls every working day. We also use them to connect with friends and relatives that live far away. In response to this, we have added a possibility to call your fellows to Webix Chat.

    The interface is rather familiar and allows users to quickly make audio and video calls, mute sound or video streams and overview the call history.

    What’s next

    For more information on Webix 8.3 features and updates, go to the What’s new page. To get the library itself, upgrade via npm, Client area or click the big purple button to download the library.

    Download Webix 8.3

    If you appreciate this release or regret about any missing features, feel free to share your thoughts in the comments section below. We are always glad to receive any feedback and suggestions. See you next time!