Vaadin Charts

Vaadin Charts

Bring your data to life

Vaadin Charts is a powerful tool for visualizing your data. It works seamlessly in your HTML5, JavaScript and Vaadin project. Just choose the chart type you need from our comprehensive collection and give your data a look'n feel everyone can understand.

New release out: Charts 3.2 RC with React support.
Read release notes

Published Aug 22 2016

 
jQuery, Polymer, Java, Vaadin, HTML5, JavaScript, AngularJS, React
 
Rich and powerful

Vaadin Charts comes with a vast number of different chart types from simple plotting to complex financial charting. It includes the most common charts, such as bar, column, pie, area, areaspline, line, spline, scatter, angular gauges, arearange, areasplinerange, columnrange and polar charts. But you'll also get financial charts, such as candlestick and Open-High-Low-Close, and 3D charts.

All charts are HTML5 and vector graphics based on SVG and VML, which means that they get rendered crystal clear and sharp on any device without any plugins. Rendering is beautifully animated and your interactions with the chart itself feel smooth when highlighting different series, drilling down or zooming into details. Vaadin Charts also supports responsive design when you need control for various screen sizes.

  • Dozens of feature-rich chart types
  • Animated interactions
  • Use with any device
Vaadin Charts on any device
Highly customizable

Vaadin Charts allows you to configure and tweak the behavior and appearance of your charts as much as you need to or whatever your brand guidelines might require. You can adjust all colors, legend positioning, borders and gradients with plain CSS. Vaadin Charts for Vaadin Framework ships with multiple ready-made color schemes to help you get everything right. On the other hand you'll find it really easy to theme your charts, thanks to a well defined CSS theming practice.

You can combine as many different chart types as you need to the same charting area and have multiple axes. And it doesn't matter if your data is simple or you need to visualize some big data. When you really have a lot of data you can use data grouping to sample your data on needed resolutions and still keep the chart snappy and high performing.

  • Any look'n feel you need
  • Combine different charts
  • From small data to big data
Vaadin Charts is highly customisable
 
Developer freedom

You can use Vaadin Charts with any web application programming language. There are two main modules of Vaadin Charts: Vaadin Charts for Web developers and Vaadin Charts for Java developers. Both of these use the same powerful charting core.

For web developers, the main API is a declarative web component API, which can be used in plain HTML5 or controlled entirely with JavaScript. For Java developers, the main API is the server-side Java API as Vaadin developers would expect. Multiple samples for different frameworks and libraries are available, e.g. Polymer, jQuery and AngularJS.

  • Use with any programming language
  • Declarative web components API
  • Server-side API for Java developers
Use Vaadin Charts with various technologies and languages
 
Pie chart
HTML / Edit in CodePen
<!-- webcomponents polyfills and html import to head -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/
webcomponentsjs/0.7.22/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-charts/3.1.0/
vaadin-pie-chart.html"/>

<vaadin-pie-chart>
  <chart-title>Revenue by industry</chart-title>
  <subtitle>2015</subtitle>
  <tooltip point-format="<b>{point.percentage:.1f}%</b>">
  </tooltip>
  <plot-options>
    <pie allow-point-select="true" show-in-legend="true" cursor="pointer">
      <data-labels enabled="true" format="{point.name}: {point.y:.1f} M€">
      </data-labels>
    </pie>
  </plot-options>

  <data-series name="Revenue">
    <data>
      ["Aerospace", 90.0],
      ["Medical", 53.6],
      ["Agriculture ", 25.6],
      ["Automotive", 17.0],
      ["Consumers", 12.4],
      ["Subsidies", 1.4]
    </data>
  </data-series>
</vaadin-pie-chart>
Column chart
HTML / Edit in CodePen
<!-- webcomponents polyfills and html import to head -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/
webcomponentsjs/0.7.22/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-charts/
3.1.0/vaadin-column-chart.html"/>

<vaadin-column-chart>
  <chart-title>Earnings</chart-title>
  <subtitle>2011 - 2014</subtitle>
  <x-axis>
    <categories>2011, 2012, 2013, 2014</categories>
  </x-axis>
  <y-axis>
    <chart-title>B€</chart-title>
  </y-axis>
  <tooltip point-format="{series.name}: {point.y} B€"></tooltip>

  <data-series name="Revenue">
    <data>1.5, 1.8, 1.2, 2.3</data>
  </data-series>
  <data-series name="Expenses">
    <data>1.2, 1.1, 1.3, 0.9</data>
  </data-series>
  <data-series name="Net income">
    <data>-0.3, 0.7, -0.1, 1.4</data>
  </data-series>
</vaadin-column-chart>
Spline chart
HTML / Edit in CodePen
<!-- webcomponents polyfills and html import to head -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/
webcomponentsjs/0.7.22/webcomponents-lite.min.js"></script>
<link rel="import" href="https://cdn.vaadin.com/vaadin-charts/3.1.0/
vaadin-areaspline-chart.html"/>

<vaadin-areaspline-chart>
  <chart-title>Monthly supply and demand</chart-title>
  <subtitle>Last six months</subtitle>
  <legend layout="vertical" align="left"
            vertical-align="top" x="150" y="100" floating="true"></legend>
  <tooltip shared="true" value-suffix="t"></tooltip>
  <x-axis>
    <categories>January, February, March, April, May, June</categories>
  </x-axis>
  <y-axis>
    <chart-title>Metric tons</chart-title>
  </y-axis>

  <data-series name="Supply">
    <data>35, 28, 45, 60, 80, 74</data>
  </data-series>
  <data-series name="Demand">
    <data>29, 11, 50, 63, 65, 61</data>
  </data-series>
</vaadin-areaspline-chart>
Pie chart
Java

import com.vaadin.addon.charts.Chart;
import com.vaadin.addon.charts.model.ChartType;
import com.vaadin.addon.charts.model.Configuration;
import com.vaadin.addon.charts.model.Cursor;
import com.vaadin.addon.charts.model.DataLabels;
import com.vaadin.addon.charts.model.DataSeries;
import com.vaadin.addon.charts.model.DataSeriesItem;
import com.vaadin.addon.charts.model.PlotOptionsPie;
import com.vaadin.addon.charts.model.Tooltip;

// ...
Chart chart = new Chart(ChartType.PIE);
Configuration conf = chart.getConfiguration();

conf.setTitle("Revenue by industry");
conf.setSubTitle("2015");

Tooltip tooltip = conf.getTooltip();
tooltip.setPointFormat("{point.percentage:.1f}%");

PlotOptionsPie plotOptions = new PlotOptionsPie();
plotOptions.setAllowPointSelect(true);
plotOptions.setCursor(Cursor.POINTER);
plotOptions.setShowInLegend(true);
DataLabels dataLabels = plotOptions.getDataLabels();
dataLabels.setEnabled(true);
dataLabels.setFormat("{point.name}: {point.y:.1f} M€");
conf.setPlotOptions(plotOptions);

DataSeries series = new DataSeries("Revenue");
series.add(new DataSeriesItem("Aerospace", 90.0));
series.add(new DataSeriesItem("Medical", 53.6));
series.add(new DataSeriesItem("Agriculture", 25.6));
series.add(new DataSeriesItem("Automotive", 17.0));
series.add(new DataSeriesItem("Consumers", 12.4));
series.add(new DataSeriesItem("Subsidies", 1.4));
conf.setSeries(series);
Column chart
Java
import com.vaadin.addon.charts.Chart;
import com.vaadin.addon.charts.model.ChartType;
import com.vaadin.addon.charts.model.Configuration;
import com.vaadin.addon.charts.model.ListSeries;
import com.vaadin.addon.charts.model.Tooltip;
import com.vaadin.addon.charts.model.XAxis;
import com.vaadin.addon.charts.model.YAxis;

// ...
Chart chart = new Chart(ChartType.COLUMN);
Configuration conf = chart.getConfiguration();

conf.setTitle("Earnings");
conf.setSubTitle("2011 - 2014");

XAxis xAxis = conf.getxAxis();
xAxis.setCategories("2011", "2012", "2013", "2014");

YAxis yAxis = conf.getyAxis();
yAxis.setTitle("B€");

Tooltip tooltip = conf.getTooltip();
tooltip.setPointFormat("{series.name}: {point.y} B€");

conf.addSeries(new ListSeries("Revenue", 1.5, 1.8, 1.2, 2.3));
conf.addSeries(new ListSeries("Expenses", 1.2, 1.1, 1.3, 0.9));
conf.addSeries(new ListSeries("Net income", -0.3, 0.7, -0.1, 1.4));
Spline chart
Java
import com.vaadin.addon.charts.Chart;
import com.vaadin.addon.charts.model.ChartType;
import com.vaadin.addon.charts.model.Configuration;
import com.vaadin.addon.charts.model.HorizontalAlign;
import com.vaadin.addon.charts.model.LayoutDirection;
import com.vaadin.addon.charts.model.Legend;
import com.vaadin.addon.charts.model.ListSeries;
import com.vaadin.addon.charts.model.Tooltip;
import com.vaadin.addon.charts.model.VerticalAlign;
import com.vaadin.addon.charts.model.XAxis;
import com.vaadin.addon.charts.model.YAxis;

// ...
Chart chart = new Chart(ChartType.AREASPLINE);
Configuration conf = chart.getConfiguration();

conf.setTitle("Monthly supply and demand");
conf.setSubTitle("Last six months");

Legend legend = conf.getLegend();
legend.setLayout(LayoutDirection.VERTICAL);
legend.setAlign(HorizontalAlign.LEFT);
legend.setFloating(true);
legend.setVerticalAlign(VerticalAlign.TOP);
legend.setX(150);
legend.setY(100);

Tooltip tooltip = conf.getTooltip();
tooltip.setValueSuffix("t");
tooltip.setShared(true);

XAxis xAxis = conf.getxAxis();
xAxis.setCategories("January", "February", "March", "April", "May",
		"June");

YAxis yAxis = conf.getyAxis();
yAxis.setTitle("Metric tons");

conf.addSeries(new ListSeries("Supply", 35, 28, 45, 60, 80, 74));
conf.addSeries(new ListSeries("Demand", 29, 11, 50, 63, 65, 61));
Pie chart
HTML / Edit in CodePen
<template is="dom-bind" id="app">
  <vaadin-pie-chart id="pie-with-legend">
    <chart-title>Revenue by industry</chart-title>
    <subtitle>2015</subtitle>
    <tooltip point-format="<b>{point.percentage:.1f}%</b>">
    </tooltip>
    <plot-options>
      <pie allow-point-select="true" show-in-legend="true"
             cursor="pointer">
        <data-labels enabled="true"
             format="{point.name}: {point.y:.1f} M€">
        </data-labels>
      </pie>
    </plot-options>
    <data-series name="Revenue" data="[[seriesData]]">
    </data-series>
  </vaadin-pie-chart>
  <my-data-source data="{{seriesData}}"></my-data-source>
</template>

<dom-module id="my-data-source">
  <script>
       addEventListener('WebComponentsReady', function () {
            Polymer({
                is: "my-data-source",
                properties: {
                    data: {
                        type: Array,
                        notify: true,
                        value: [
                            ["Aerospace", 90.0],
                            ["Medical", 53.6],
                            ["Agriculture", 25.6],
                            ["Automotive", 17.0],
                            ["Consumers", 12.4],
                            ["Subsidies", 1.4]]
                    }
                }
            });
        });
  </script>
</dom-module>
Column chart
HTML / Edit in CodePen
<template is="dom-bind" id="app">
  <vaadin-column-chart id="column-with-negative-values">
    <chart-title>Earnings</chart-title>
    <subtitle>2011 - 2014</subtitle>
    <x-axis>
      <categories>2011, 2012, 2013, 2014</categories>
    </x-axis>
    <y-axis>
      <chart-title>B€</chart-title>
    </y-axis>
    <tooltip point-format="{series.name}: {point.y} B€"></tooltip>
    <data-series name="Revenue" data="[[revenueSeries]]"></data-series>
    <data-series name="Expenses" data="[[expensesSeries]]"></data-series>
    <data-series name="Net income" data="[[netSeries]]"></data-series>
  </vaadin-column-chart>
  <my-data-source revenue-series="{{revenueSeries}}"
      expenses-data="{{expensesSeries}}"
      net-data="{{netSeries}}"></my-data-source>
</template>

<dom-module id="my-data-source">
  <script>
    addEventListener('WebComponentsReady', function () {
      Polymer({
        is: "my-data-source",
        properties: {
          revenueSeries: {
            type: Array,
            notify: true,
            value: [ 1.5, 1.8, 1.2, 2.3 ]
          },
          expensesData: {
            type: Array,
            notify: true,
            value: [ 1.2, 1.1, 1.3, 0.9 ]
          },
          netData: {
            type: Array,
            notify: true,
            value: [ -0.3, 0.7, -0.1, 1.4 ]
          }
      }});
    });
  </script>
</dom-module>
Spline chart
HTML / Edit in CodePen
<template is="dom-bind" id="app">
  <vaadin-areaspline-chart id="area-spline">
    <chart-title>Monthly supply and demand</chart-title>
    <subtitle>Last six months</subtitle>
    <legend layout="vertical" align="left"
            vertical-align="top" x="150" y="100" floating="true"></legend>
    <tooltip shared="true" value-suffix="t"></tooltip>
    <x-axis>
      <categories>January, February, March, April, May, June</categories>
    </x-axis>
    <y-axis>
      <chart-title>Metric tons</chart-title>
    </y-axis>
    <data-series name="Supply" data="[[supplySeries]]"></data-series>
    <data-series name="Demand" data="[[demandSeries]]"></data-series>
  </vaadin-areaspline-chart>
  <my-data-source supply-series="{{supplySeries}}"
      demand-series="{{demandSeries}}"></my-data-source>
</template>

<dom-module id="my-data-source">
  <script>
    addEventListener('WebComponentsReady', function () {
      Polymer({
        is: "my-data-source",
        properties: {
          supplySeries: {
            type: Array,
            notify: true,
            value: [35, 28, 45, 60, 80, 74]
          },
          demandSeries: {
            type: Array,
            notify: true,
            value: [29, 11, 50, 63, 65, 61]
          }
      }});
    });
  </script>
</dom-module>
Pie chart
Angular 2 / Edit in Plunker
@Component({
	selector: 'my-app',
	template: `
	<vaadin-pie-chart id="pie-with-legend">
    <chart-title>Revenue by industry</chart-title>
    <subtitle>2015</subtitle>
    <tooltip point-format="<b>{point.percentage:.1f}%</b>">
    </tooltip>
    <plot-options>
      <pie allow-point-select="true" show-in-legend="true"
             cursor="pointer">
        <data-labels enabled="true"
             format="{point.name}: {point.y:.1f} M€">
        </data-labels>
      </pie>
    </plot-options>
    <data-series name="Revenue" [data]="seriesData">
    </data-series>
  </vaadin-pie-chart>
	`,
	directives: [VaadinCharts, DataSeries]
})
export class AppComponent {

  seriesData = [
    ["Aerospace", 90.0],
    ["Medical", 53.6],
    ["Agriculture", 25.6],
    ["Automotive", 17.0],
    ["Consumers", 12.4],
    ["Subsidies", 1.4]
  ];

}
HTML
<my-app>Loading...</my-app>
Column chart
Angular 2 / Edit in Plunker
@Component({
	selector: 'my-app',
	template: `
	<vaadin-column-chart>
      <chart-title>Earnings</chart-title>
      <subtitle>2011 - 2014</subtitle>
      <x-axis>
        <categories>2011, 2012, 2013, 2014</categories>
      </x-axis>
      <y-axis>
        <chart-title>B€</chart-title>
      </y-axis>
      <tooltip point-format="{series.name}: {point.y} B€"></tooltip>
      <data-series name="Revenue" [data]="revenueSeries"></data-series>
      <data-series name="Expenses" [data]="expensesSeries"></data-series>
      <data-series name="Net income" [data]="incomeSeries"></data-series>
    </vaadin-column-chart>
	`,
	directives: [VaadinCharts, DataSeries]
})
export class AppComponent {

  revenueSeries = [ 1.5, 1.8, 1.2, 2.3 ];
  expensesSeries = [ 1.2, 1.1, 1.3, 0.9 ];
  incomeSeries = [ -0.3, 0.7, -0.1, 1.4 ];

}
      
HTML
<my-app>Loading...</my-app>
Spline chart
Angular 2 / Edit in Plunker
@Component({
	selector: 'my-app',
	template: `
	<vaadin-areaspline-chart >
      <chart-title>Monthly supply and demand</chart-title>
      <subtitle>Last six months</subtitle>
      <legend layout="vertical" align="left" vertical-align="top" x="150" y="100" floating="true"></legend>
      <tooltip shared="true" value-suffix="t"></tooltip>
      <x-axis>
        <categories>January, February, March, April, May, June</categories>
      </x-axis>
      <y-axis>
        <chart-title>Metric tons</chart-title>
      </y-axis>
      <data-series name="Supply" [data]="supplySeries"></data-series>
      <data-series name="Demand" [data]="demandSeries"></data-series>
  </vaadin-areaspline-chart>
	`,
	directives: [VaadinCharts, DataSeries]
})
export class AppComponent {

  supplySeries = [35, 28, 45, 60, 80, 74];
  demandSeries = [ 29, 11, 50, 63, 65, 61 ];

}
      
HTML
<my-app>Loading...</my-app>
Pie chart
HTML / Edit in CodePen
<div ng-app='myApp'>
  <div ng-controller="chartCtrl">
    <chart-wrapper data-series="{{chartData}}"></chart-wrapper>
  </div>
</div>

<dom-module id="chart-wrapper">
  <template>
    <vaadin-pie-chart>
      <chart-title>Revenue by industry</chart-title>
      <subtitle>2015</subtitle>
      <tooltip point-format="<b>{point.percentage:.1f}%</b>"></tooltip>
      <plot-options>
        <pie allow-point-select="true" show-in-legend="true"
               cursor="pointer">
          <data-labels enabled="true"
               format="{point.name}: {point.y:.1f} M€">
          </data-labels>
        </pie>
      </plot-options>
      <data-series name="Revenue share" data="[[dataSeries]]"></data-series>
    </vaadin-pie-chart>
  </template>
  <script>
    addEventListener('WebComponentsReady', function () {
      Polymer({
        is: "chart-wrapper",
        properties: {
          dataSeries: {
            type: Array
          }
      }});
    });
  </script>
</dom-module>
Angular / Edit in CodePen
var myApp = angular.module('myApp',[]);
myApp.controller('chartCtrl', ['$scope', function($scope) {
    $scope.chartData = [
        ["Aerospace", 90.0],
        ["Medical", 53.6],
        ["Agriculture ", 25.6],
        ["Automotive", 17.0],
        ["Consumers", 12.4],
        ["Subsidies", 1.4]
      ];
}]);
Column chart
HTML / Edit in CodePen
<div ng-app='myApp'>
  <div ng-controller="chartCtrl">
    <chart-wrapper revenue-series="{{revenue}}" expenses-series="{{expenses}}"
                   income-series="{{netIncome}}"></chart-wrapper>
  </div>
</div>
<dom-module id="chart-wrapper">
  <template>
    <vaadin-column-chart>
      <chart-title>Earnings</chart-title>
      <subtitle>2011 - 2014</subtitle>
      <x-axis>
        <categories>2011, 2012, 2013, 2014</categories>
      </x-axis>
      <y-axis>
        <chart-title>B€</chart-title>
      </y-axis>
      <tooltip point-format="{series.name}: {point.y} B€"></tooltip>
      <data-series name="Revenue" data="[[revenueSeries]]"></data-series>
      <data-series name="Expenses" data="[[expensesSeries]]"></data-series>
      <data-series name="Net income" data="[[incomeSeries]]"></data-series>
    </vaadin-column-chart>
  </template>
  <script>
    addEventListener('WebComponentsReady', function () {
      Polymer({
        is: "chart-wrapper",
        properties: {
          revenueSeries: {
            type: Array
          },
          expensesSeries: {
            type: Array
          },
          incomeSeries: {
            type: Array
          }
      }});
    });
  </script>
</dom-module>
Angular / Edit in CodePen
var myApp = angular.module('myApp',[]);
myApp.controller('chartCtrl', ['$scope', function($scope) {
    $scope.revenue = [ 1.5, 1.8, 1.2, 2.3 ];
    $scope.expenses = [ 1.2, 1.1, 1.3, 0.9 ];
    $scope.netIncome = [ -0.3, 0.7, -0.1, 1.4 ];
}]);
Spline chart
HTML / Edit in CodePen
<div ng-app='myApp'>
  <div ng-controller="chartCtrl">
    <chart-wrapper supply-series="{{supply}}" demand-series="{{demand}}"></chart-wrapper>
  </div>
</div>
<dom-module id="chart-wrapper">
  <template>
    <vaadin-areaspline-chart >
      <chart-title>Monthly supply and demand</chart-title>
      <subtitle>Last six months</subtitle>
      <legend layout="vertical" align="left" vertical-align="top" x="150" y="100" floating="true"></legend>
      <tooltip shared="true" value-suffix="t"></tooltip>
      <x-axis>
        <categories>January, February, March, April, May, June</categories>
      </x-axis>
      <y-axis>
        <chart-title>Metric tons</chart-title>
      </y-axis>
      <data-series name="Supply" data="[[supplySeries]]"></data-series>
      <data-series name="Demand" data="[[demandSeries]]"></data-series>
    </vaadin-areaspline-chart>
  </template>
  <script>
    addEventListener('WebComponentsReady', function () {
      Polymer({
        is: "chart-wrapper",
        properties: {
          supplySeries: {
            type: Array
          },
          demandSeries: {
            type: Array
          }
      }});
    });
  </script>
</dom-module>
Angular / Edit in CodePen
var myApp = angular.module('myApp',[]);
myApp.controller('chartCtrl', ['$scope', function($scope) {
    $scope.supply = [35, 28, 45, 60, 80, 74];
    $scope.demand = [ 29, 11, 50, 63, 65, 61 ];
}]);
Pie chart
HTML / Edit in CodePen
<vaadin-pie-chart id="pie-with-legend">
  <chart-title>Revenue by industry</chart-title>
  <subtitle>2015</subtitle>
  <tooltip point-format="<b>{point.percentage:.1f}%</b>"></tooltip>
  <plot-options>
    <pie allow-point-select="true" show-in-legend="true" cursor="pointer">
      <data-labels enabled="true" format="{point.name}: {point.y:.1f} M€">
      </data-labels>
    </pie>
  </plot-options>
  <data-series name="Revenue share"></data-series>
</vaadin-pie-chart>
jQuery / Edit in CodePen
$(document).on('WebComponentsReady', function() {
  var chart = $('#pie-with-legend')[0].chart;
  chart.series[0].setData([
    ["Aerospace", 45.0],
    ["Medical", 26.8],
    ["Agriculture ", 12.8],
    ["Automotive", 8.5],
    ["Consumers", 6.2],
    ["Subsidies", 0.7]
  ]);
});
Column chart
HTML / Edit in CodePen
<vaadin-column-chart id="column-with-negative-values">
  <chart-title>Earnings</chart-title>
  <subtitle>2011 - 2014</subtitle>
  <x-axis>
    <categories>2011, 2012, 2013, 2014</categories>
  </x-axis>
  <y-axis>
    <chart-title>B€</chart-title>
  </y-axis>
  <tooltip point-format="{series.name}: {point.y} B€"></tooltip>
  <data-series name="Revenue"></data-series>
  <data-series name="Expenses"></data-series>
  <data-series name="Net income"></data-series>
</vaadin-column-chart>
jQuery / Edit in CodePen
$(document).on('WebComponentsReady', function() {
  var chart = $('#column-with-negative-values')[0].chart;
  chart.series[0].setData([ 1.5, 1.8, 1.2, 2.3 ]);
  chart.series[1].setData([ 1.2, 1.1, 1.3, 0.9 ]);
  chart.series[2].setData([ -0.3, 0.7, -0.1, 1.4 ]);
});
Spline chart
HTML / Edit in CodePen
<vaadin-areaspline-chart id="area-spline">
  <chart-title>Monthly supply and demand</chart-title>
  <subtitle>Last six months</subtitle>
  <legend layout="vertical" align="left" vertical-align="top"
            x="150" y="100" floating="true"></legend>
  <tooltip shared="true" value-suffix="t"></tooltip>
  <x-axis>
    <categories>January, February, March, April, May, June</categories>
  </x-axis>
  <y-axis>
    <chart-title>Metric tons</chart-title>
  </y-axis>
  <data-series name="Supply"></data-series>
  <data-series name="Demand"></data-series>
</vaadin-areaspline-chart>
jQuery / Edit in CodePen
$(document).on('WebComponentsReady', function() {
  var chart = $('#area-spline')[0].chart;
  chart.series[0].setData([35, 28, 45, 60, 80, 74]);
  chart.series[1].setData([29, 11, 50, 63, 65, 61]);
});
Pie chart
React
var React = require('react');

module.exports = React.createClass({
  getDefaultProps: function() {
    return {
      data: []
    };
  },
  render: function() {
    return (
      <vaadin-pie-chart>
        <chart-title>Revenue by industry</chart-title>
        <subtitle>2015</subtitle>
        <tooltip is="" point-format="<b>{point.percentage:.1f}%</b>">
        </tooltip>
        <plot-options>
          <pie is="" allow-point-select={true} show-in-legend={true}
			cursor="pointer">
            <data-labels enabled={true}
				format="{point.name}: {point.y:.1f} M€"></data-labels>
          </pie>
        </plot-options>
      <data-series name="Revenue share">
        <data>{this.props.data.map(JSON.stringify).join(',')}</data>
      </data-series>
    </vaadin-pie-chart>
    )
  }
});
Column chart
React
var React = require('react');

module.exports = React.createClass({
  getDefaultProps: function() {
    return {
      dataRevenue: [],
      dataExpenses: [],
      dataNetIncome: []
    };
  },
  render: function() {
    return (
      <vaadin-column-chart>
        <chart-title>Earnings</chart-title>
        <subtitle>2011 - 2014</subtitle>
        <x-axis>
          <categories>2011, 2012, 2013, 2014</categories>
        </x-axis>
        <y-axis>
          <chart-title>B€</chart-title>
        </y-axis>
        <tooltip is="" point-format="{series.name}: {point.y} B€">
		</tooltip>
        <data-series name="Revenue">
          <data>{this.props.dataRevenue.map(JSON.stringify).join(',')}
          </data>
        </data-series>
        <data-series name="Expenses">
          <data>{this.props.dataExpenses.map(JSON.stringify).join(',')}
          </data>
        </data-series>
        <data-series name="Net income">
          <data>{this.props.dataNetIncome.map(JSON.stringify).join(',')}
          </data>
        </data-series>
      </vaadin-column-chart>
    )
  }
});
Spline chart
React
var React = require('react');

module.exports = React.createClass({
  getDefaultProps: function() {
    return {
      dataSupply: [],
      dataDemand: []
    };
  },
  render: function() {
    return (
      <vaadin-areaspline-chart id="area-spline">
        <chart-title>Monthly supply and demand</chart-title>
        <subtitle>Last six months</subtitle>
        <legend is="" layout="vertical" align="left"
            vertical-align="top" x={150} y={100} floating={true}></legend>
        <tooltip is="" shared={true} value-suffix="t"></tooltip>
        <x-axis>
          <categories>January, February, March, April, May, June
          </categories>
        </x-axis>
        <y-axis>
          <chart-title>Metric tons</chart-title>
        </y-axis>
        <data-series name="Supply">
          <data>{this.props.dataSupply.map(JSON.stringify).join(',')}
          </data>
        </data-series>
        <data-series name="Demand">
          <data>{this.props.dataDemand.map(JSON.stringify).join(',')}
          </data>
        </data-series>
      </vaadin-areaspline-chart>
    )
  }
});
Revenue by industry 2015 ["Aerospace", 90.0], ["Medical", 53.6], ["Agriculture ", 25.6], ["Automotive", 17.0], ["Consumers", 12.4], ["Subsidies", 1.4]
Earnings 2011 - 2014 2011, 2012, 2013, 2014 B€ 1.5, 1.8, 1.2, 2.3 1.2, 1.1, 1.3, 0.9 -0.3, 0.7, -0.1, 1.4
Monthly supply and demand Last six months January, February, March, April, May, June Metric tons 35, 28, 45, 60, 80, 74 29, 11, 50, 63, 65, 61
 
See more HTML examples Java examples
 

Purchase commercial license

Vaadin Charts requires a license per every developer using it. First you can get an evaluation license for 30 days, afterwhich you can either buy a Pro Tools subscription or a perpetual license.

 
Supported browsers


See details »

 

Updates

27th Jul 2016 Vaadin Charts 3.2 beta with React support
See release notes »

11th Jul 2016 Vaadin Charts 3.1 final with Angular 2 support
See release notes »

6th Jun 2016 Vaadin Charts 3.1 rc1 with Angular 2 support
See release notes »

4th May 2016 Vaadin Charts 3.1 beta with Angular 2 support
See release notes »

31st Mar 2016 Vaadin Charts 3.0.0 Final release is out
See release notes »

Documentation

Vaadin Charts documentation
Migration guide from Vaadin Charts 2.x to 3.x

Tutorials
Getting started with Vaadin Charts Java API

Learn how to set up everything and create your first chart with server-side Java.
Learn now »

Video: Getting started with Vaadin Charts in Java

Check out this video tutorial and get started in 4 minutes.
Watch »

Getting started with Vaadin Charts Elements API

Learn how to set up everything and create your first chart with server-side Java.
Learn now »

Getting started with Vaadin Charts for Angular 2

Learn how to set up everything and create your first chart with Angular 2.
Learn now »

Styling your Vaadin Charts in Java

Learn two ways to style your Vaadin Charts: styling a single chart and styling all your charts.
Learn now »