polymer_highcharts 0.2.1+10

  • README.md
  • Installing
  • Versions
  • 0

Polymer Highcharts

Use Highcharts in your polymer projects. With polymer components you can add charts to your projects easier than ever.

How does it work?

First of all, add the dependency to your pubspec.yaml:

  polymer_highcharts: any

Add this lines to the main html of your application (index.html) in the head section.

<script src="../../packages/polymer_highcharts/js/standalone-framework.js"></script>
<script src="../../packages/polymer_highcharts/js/highcharts.js"></script>
<script src="../../packages/polymer_highcharts/js/highcharts-more.js"></script>
<script src="../../packages/polymer_highcharts/js/highcharts.src.SHADOWDOMFIX.js"></script>

Then, add the imports to your html file

<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/polymer_highcharts/highcharts_polymer_component.html">
<link rel="import" href="../../packages/polymer_highcharts/highcharts_series.html">
<link rel="import" href="../../packages/polymer_highcharts/highcharts_x_axis.html">
<link rel="import" href="../../packages/polymer_highcharts/highcharts_y_axis.html">

And just use the components:

      title="Title" subtitle="Monthly Average Temperature" 
      type="line" borderColor="#CCC" creditsEnabled="false"
      borderWidth="1" borderRadius="8" backgroundColor="rgba(0,0,0,0)">
  <highcharts-x-axis categories="['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']"></highcharts-x-axis>
  <highcharts-y-axis title="Temperatura (ÂșC)"></highcharts-y-axis>
  <highcharts-series name="Ponferrada"
      numData="[17.0, 16.9, 19.5, 24.5, 28.2, 31.5, 35.2, 36.5, 33.3, 28.3, 23.9, 19.6]"></highcharts-series>
  <highcharts-series name="Tokyo"
      numData="[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]"></highcharts-series>
  <highcharts-series name="New York"
      numData="[-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]"></highcharts-series>


You can find full code samples in the Polymer Highcharts Samples Site Or you can also take a look at the github site of the samples, just in case you want to clone it and see it running live.


*This is just a work in progress. This is just a piece of software to help people use Highcharts in their Dart projects, but the author is not part of the Highcharts team. * Keep in mind that if you want to use Highcharts in commercial applications, you will have to acquire a developer licence



  • Initial version, created by Stagehand.


  • Bugfix setting chartOptions and chartTitle
  • Added legendEnabled property
  • Configurable colors in highcharts-series
  • Require 0.2.1 version of highcharts_options
  • Multiple axis optimizations
  • Some optimizations in multiple axes and avoiding chart creation when not necessary. If the data has the same number of series and X axes, the data is updated instead of recreating again the whole chart
  • Support for Internet Explorer 10 has been improved
  • Allow dynamic series to have no series at all using highcharts-no-series element
  • Fix axesDirty returning false when we had different number of axes


  • Added DEBUG mode, it logs the highcharts configuration object to console, when the static variable DEBUG is set to true

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  polymer_highcharts: ^0.2.1+10

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:polymer_highcharts/highcharts_axes.dart';
import 'package:polymer_highcharts/highcharts_axis.dart';
import 'package:polymer_highcharts/highcharts_no_series.dart';
import 'package:polymer_highcharts/highcharts_polymer_component.dart';
import 'package:polymer_highcharts/highcharts_series.dart';
import 'package:polymer_highcharts/highcharts_x_axis.dart';
import 'package:polymer_highcharts/highcharts_y_axis.dart';
Version Uploaded Documentation Archive
0.2.1+10 Dec 19, 2017 Go to the documentation of polymer_highcharts 0.2.1+10 Download polymer_highcharts 0.2.1+10 archive
0.2.1+9 Jul 10, 2015 Go to the documentation of polymer_highcharts 0.2.1+9 Download polymer_highcharts 0.2.1+9 archive
0.2.1+8 Jun 16, 2015 Go to the documentation of polymer_highcharts 0.2.1+8 Download polymer_highcharts 0.2.1+8 archive
0.2.1+7 Apr 28, 2015 Go to the documentation of polymer_highcharts 0.2.1+7 Download polymer_highcharts 0.2.1+7 archive
0.2.1+5 Apr 14, 2015 Go to the documentation of polymer_highcharts 0.2.1+5 Download polymer_highcharts 0.2.1+5 archive
0.2.1+4 Jan 23, 2015 Go to the documentation of polymer_highcharts 0.2.1+4 Download polymer_highcharts 0.2.1+4 archive
0.2.1+3 Jan 22, 2015 Go to the documentation of polymer_highcharts 0.2.1+3 Download polymer_highcharts 0.2.1+3 archive
0.2.1+2 Jan 22, 2015 Go to the documentation of polymer_highcharts 0.2.1+2 Download polymer_highcharts 0.2.1+2 archive
0.2.1+1 Jan 19, 2015 Go to the documentation of polymer_highcharts 0.2.1+1 Download polymer_highcharts 0.2.1+1 archive
0.2.1 Jan 19, 2015 Go to the documentation of polymer_highcharts 0.2.1 Download polymer_highcharts 0.2.1 archive

All 19 versions...

Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Fix dependencies in pubspec.yaml.

Running pub upgrade failed with the following output:

ERR: The current Dart SDK version is 2.1.0.
 Because polymer_highcharts depends on highcharts_options >=0.1.0+1 which requires SDK version <2.0.0, version solving failed.

Health suggestions

Format lib/highcharts_axes.dart.

Run dartfmt to format lib/highcharts_axes.dart.

Format lib/highcharts_axis.dart.

Run dartfmt to format lib/highcharts_axis.dart.

Format lib/highcharts_no_series.dart.

Run dartfmt to format lib/highcharts_no_series.dart.

Fix additional 4 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/highcharts_polymer_component.dart (Run dartfmt to format lib/highcharts_polymer_component.dart.)
  • lib/highcharts_series.dart (Run dartfmt to format lib/highcharts_series.dart.)
  • lib/highcharts_x_axis.dart (Run dartfmt to format lib/highcharts_x_axis.dart.)
  • lib/highcharts_y_axis.dart (Run dartfmt to format lib/highcharts_y_axis.dart.)

Maintenance issues and suggestions

Add SDK constraint in pubspec.yaml. (-50 points)

For information about setting SDK constraint, please see https://www.dartlang.org/tools/pub/pubspec#sdk-constraints.

Fix platform conflicts. (-20 points)

Error(s) prevent platform classification:

Fix dependencies in pubspec.yaml.

Running dartdoc failed. (-10 points)

Make sure dartdoc runs without any issues.

The description is too short. (-20 points)

Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

Maintain an example. (-10 points)

Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use polymer_highcharts.dart.