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, Polymer 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.

Start free trial Buy

New release out: Charts 4.0 Beta for Vaadin Framework 8 Beta
Read release notes

Published Dec 22 2016

 
jQuery, Polymer, Java, Vaadin, HTML5, JavaScript
 
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. Vaadin Framework, Polymer, and jQuery.

  • Use with any programming language
  • Declarative web components API
  • Server-side API for Java developers
Use Vaadin Charts with various technologies and languages
 
Start free trial Buy
 
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
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]);
});
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.

Purchase

Included in Pro Tools subscription

Subscribe

$790
per developer

Buy now
 
Supported browsers


See details »

 

Latest releases

22nd Dec 2016 Vaadin Charts 4.0.0-beta1 for Vaadin Framework 8
See release notes »

22nd Aug 2016 Vaadin Charts 3.2.0
See release notes »

Documentation

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

Getting Started
Getting started with Vaadin Charts Java API

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

Getting started with Vaadin Charts Elements API

Learn how to set up everything and create your first chart using Web Components.
Learn now »

Videos
Video: Getting started with Vaadin Charts in Java

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

Java Tutorials
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 »

Data labels in Vaadin Charts 3 Java

Quick tutorial on how to create data labels in Vaadin Charts with Java
Learn now »

Configuring Vaadin Charts 3 flags series with Java

Learn how to create flag markers in your graphs using Vaadin Charts with Java
Learn now »

Web Components Tutorials
Data labels in Vaadin Charts 3 Web Components

Quick tutorial on how to create data labels in Vaadin Charts using Web Components
Learn now »

Configuring Vaadin Charts 3 flags series with Web Components API

Learn how to create flag markers in your graphs in Vaadin Charts using Web Components
Learn now »