Vaadin Charts 6.0.0

Vaadin Charts is a charting library for modern web applications. It provides multiple different chart types for visualizing one- or two-dimensional tabular data, or scatter data with free X and Y values. In addition to Javascript and JSON APIs, you can customize the visual style using CSS. Also, it offers a Java API for Vaadin Flow developers.

API Documentation →
Demos →

Declarative API is incompatible with previous versions

Changes since version 5.0:

• Changed from type specific components (<vaadin-area-chart>, <vaaadin-bar-chart>, ...) to only two <vaadin-chart> and <vaadin-chart-series>

  <vaadin-chart title="Custom Title" subtitle="Custom Subtitle">
    <vaadin-chart-series values="[19,12,9,24,5]"></vaadin-chart-series>
    <vaadin-chart-series values="[9,2,29,4,35]"></vaadin-chart-series>
  </vaadin-chart>
  

• Introducing JS and JSON API
  • With JS API, you can now configure the chart by using the configuration object:

    [...]
    <template>
      <vaadin-chart id="mychart"></vaadin-chart>
    </template>
    [...]

    [...]
    connectedCallback() {
      super.connectedCallback();
      Polymer.RenderStatus.beforeNextRender(this, () => {
        const configuration = this.$.mychart.configuration;
        configuration.setTitle({
          text: 'The chart title'
        });
      });
    }
    [...]

  • With JSON API, you can configure the chart by calling the update method:

    [...]
    <template>
      <vaadin-chart id="mychart"></vaadin-chart>
    </template>
    [...]

    [...]
    connectedCallback() {
      super.connectedCallback();
      this.$.mychart.update({
        title: {
          text: 'Column chart'
        },
        series: [{
          type: 'column',
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
        }]
      });
    }
    [...]

• Styling is now made by CSS modules

  <link rel="import" href="../bower_components/vaadin-charts/vaadin-chart-default-theme.html">
  
  <dom-module id="css-style-example" theme-for="vaadin-chart">
     <template>
       <style include="vaadin-chart-default-theme">
         .highcharts-title {
           fill: red;
           font-size: xx-large;
         }
       </style>
     </template>
  </dom-module>

  • Colors can be set by custom variables --vaadin-charts-color-{n} (where n goes from 0 - 9)
• Concise number of supported properties to make it simple to start with a chart
• Highcharts version is now 5.0.14

v6.1.0-alpha3

Changes since last 6.1.0 release

• 50b5837 - Avoid overriding highcharts default theme with theme customization
• 958b919 and aeadf80 - Add events for extremes set for y and x axes
• 952ca99 - Charts should be usable as virtual child

v6.0.0-beta3 Vaadin Charts 6.0

Changes since last release

• Avoid overriding highcharts default theme with theme customization (#308)
• Add set extremes events for X and Y axes (#312)
• Make Vaadin Charts usable as virtual child (#315)

Check the component page to see the full documentation and demos.

v6.1.0-alpha2 with declarative title and value-labels configuration on series and categories on charts

Additions:

• #301 categories property on vaadin-chart
• #288 title property on vaadin-chart-series
• #299 value-labels property on vaadin-chart-series

Enhancements:

• #293 detect if chart had already been initialized before being connected

v6.1.0-alpha1

First release in the 6.1.x line

• Allow setting additional-options as JSON to vaadin-chart element
• New type property for vaadin-chart-series

v6.0.0-beta2 Vaadin Charts with JSON and JS API

Introducing the second Beta for the new Vaadin Charts.

• New JS and JSON API
• Highcharts now is 5.0.14
• Simplified high level API with two components (<vaadin-chart> and <vaadin-chart-series>).
  • The list of supported attributes is still short, but new attributes is being added for the next minor release.
• New styled mode, supporting style through CSS modules:

<link rel="import" href="../bower_components/vaadin-charts/vaadin-chart-default-theme.html">

<dom-module id="css-style-example" theme-for="vaadin-chart">
   <template>
     <style include="vaadin-chart-default-theme">
       .highcharts-title {
         fill: red;
         font-size: xx-large;
       }
     </style>
   </template>
</dom-module>

• Colors can be set by custom variables --vaadin-charts-color-{n} (where ngoes from0 - 9`)

Check the component page to see the full documentation and demos.

v6.0.0-beta1

6.0.0-beta1 (#289)

v6.0.0-alpha16

• Add CSS custom properties to make color theming easier (#274)
• Fix bug of configuration being overwritten (#275)

v6.0.0-alpha15

Add module to support accessibility descriptions (#273)

v6.0.0-alpha14

6.0.0-alpha14 (#272)