JET Data Visualizations: FAQ

Version 17

    What's New

    JET 3.0.0

    In JET 3.0.0, we've added a data visualization gallery with links to use cases, components, and featured demos. We've also added several enhancements to the sunburst and treemap, providing support for custom HTML content in the sunburst root node and treemap leaf nodes, as well as data exploration features like drilling and expand/collapse. For treemap leaf nodes, label wrapping is now supported and enabled by default, improving the readability of most treemaps. Several performance improvements were also implemented, focusing on large data bar and categorical axis charts. For more information, please see Oracle JET v3.0.0.





    JET 2.3.0

    • Drag and drop support is now available for diagram, allowing dragging of diagram nodes to other nodes, links, the background, and other components. Built using HTML5 drag and drop, this feature also supports dragging from other components, and will be exposed on more components in future releases.
    • Gantt chart has been enhanced to support dependency lines, reference lines, and the custom tooltip functionality available in the other visualizations.
    • Timeline has been updated to use the standard visualization scrollbars.




    JET 2.2.0

    The gantt chart now supports row labels:



    JET 2.1.0

    JET 2.1.0 is our biggest update to the visualizations yet, introducing the new gantt chart and time axis components, box plot and pyramid chart types, container support on diagram, link support on thematic map, and a updated and more modern visual design for treemap. We've also added more performance improvements, especially for categorical axis and large bar, bubble, and scatter charts, as well several other fixes and enhancements. For more information, please see What's New in Oracle JET v2.1.0.



    JET 2.0.2

    JET 2.0.2 includes more performance improvements, along with chart drag and drop, custom fill and stroke support for charts, custom basemap support for thematic map via GeoJSON, and several other small features. For more information, see What's New in Oracle JET v2.0.2




    JET 2.0.1

    JET 2.0.1 includes several data visualization features along with performance improvements and bug fixes. For more information, see:



    JET 2.0.0

    In the recent JET 2.0.0 release, we've introduced the Picto Chart visualization as well as several enhancements to our existing visualizations, including word wrap for chart categorical axis labels, zoom direction for scatter and bubble charts, total labels for stacked bar charts, and animation for timeline. For more information, see What's New in Oracle JET 2.0.0.


    See Picto Chart: Calendars for ideas and samples on how to build calendars and other time based visualizations using the picto chart.



    What visualizations are available in JET?

    JET includes dozens of different visualization options, including:

    • Charts: Bar, Line, Area, Scatter, Bubble, Pie, Box Plot, Funnel, Pyramid, and Stock Charts. Horizontal, Vertical, Polar Variants. Spark Charts for compact display of trends.
    • Gauges: Horizontal and Circular Status Meter, Rating (Star) Gauge, LED Gauge
    • Diagram: Supports custom layouts allowing for creation of arbitrary node and link graphs.
    • Gantt
    • Legend: For use on dashboards with multiple components.
    • NBox
    • Picto Chart
    • Sunburst
    • Tag Cloud
    • Thematic Map
    • Timeline
    • Treemap


    The best place to get started is the JET cookbook: Oracle JET - Data Visualizations


    Why use JET visualizations?

    Each JET visualization supports animation, accessibility, internationalization, test automation, and a range of interactivity features. These interaction features are designed so that visualizations can interact with each other to provide analytic capabilities beyond the sum of their parts.


    More details about these high level features can be found here: Introduction to JET Data Visualization and Charting


    How do I get started?

    Go to for download links, the get started guide, demos, and everything else you'll need.




    Best Practices


    What are the best practices when using multiple data visualizations?

    The visualizations should not conflict with each other, and they should interact with each other to leverage each visualization's capabilities:

    • Use consistent colors and styling: If salary is shown in one chart as blue, don't show it as green in another chart.
    • Use a single legend for shared styles: Don't repeat legend information in each component.
    • Enable cross-component data analysis: Highlighting and filtering can be enabled across components.

    For details on what JET provides to support these best practices, see: Associated Views: Cross Component Interactivity for Data Visualizations


    Data Sets


    Which visualization should I use for percentage data sets?

    Parts of a Whole: Visualizations for Percentage Data Sets



    Which visualization should I use for a single data value?

    Consider using stylized text or the gauges. We'll be writing about popular gauge configurations in our blog:

    Introduction to Gauges Part 1: Status Meter Options and Best Practices

    Introduction to Gauges Part 2: Circular Status Meter





    For JET in general, we recommend starting with the Optimizing Performance section of the JET dev guide. For the individual components, there is a performance best practices section in each component's js doc. For example, here are the best practices for chart.


    Optimization Tips




    How do I color each bar differently in a bar chart?

    How to Create Colorful Bar Charts


    How do I control label wrapping and truncation for a categorical axis chart?

    Categorical Axis: Text-Wrapping Feature




    How do I create trend lines?

    Any inbuilt support for trend lines and sliders on the graph


    How do I customize the donut chart center content?

    Customizing Center Content within Charts and Gauges


    How do I customize the markers on a bubble or scatter chart?

    Custom Shape and Image Markers within Charts



    How do I customize the pie chart slice labels?

    Pie Chart Slice Labels


    How do I customize styling beyond what the API currently supports?

    Chart Custom Fill and Stroke


    How do I display integers on the yAxis?

    How to Configure Charts for Integer Data




    How do I create a diagram layout?

    Creating a Diagram Layout in JET


    How do I adjust the diagram viewport?

    Setting Diagram Viewport




    How do I configure the status meter gauge to look the way I want?

    Introduction to Gauges Part 1: Status Meter Options and Best Practices


    Introduction to Gauges Part 2: Circular Status Meter



    How do I customize the circular status meter center content?

    Customizing Center Content within Charts and Gauges



    How do I support input on the status meter or rating gauges?

    Set readOnly to false, and use knockout or the optionChange listener to react to the value changes:
    knockout: Two-Way Data Binding JET Components with Knockout

    optionChange: JSDoc: Class: ojStatusMeterGauge