PHPackages                             marqu3s/yii2-highcharts-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility &amp; Helpers](/categories/utility)
4. /
5. marqu3s/yii2-highcharts-widget

ActiveYii2-extension[Utility &amp; Helpers](/categories/utility)

marqu3s/yii2-highcharts-widget
==============================

Highcharts widget for Yii 2 Framework.

v11.4.8.1(1y ago)08MITPHP

Since Sep 17Pushed 1y agoCompare

[ Source](https://github.com/marqu3s/yii2-highcharts)[ Packagist](https://packagist.org/packages/marqu3s/yii2-highcharts-widget)[ Docs](https://github.com/miloschuman/yii2-highcharts)[ RSS](/packages/marqu3s-yii2-highcharts-widget/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)Dependencies (3)Versions (3)Used By (0)

Yii2 Highcharts Widget
======================

[](#yii2-highcharts-widget)

[![Latest Stable Version](https://camo.githubusercontent.com/39d22dca3e8794ad185cccc756f5f71c4966cdd65025130289d87dba3b0f87e4/68747470733a2f2f706f7365722e707567782e6f72672f6d696c6f736368756d616e2f796969322d686967686368617274732d7769646765742f762f737461626c652e706e67)](https://packagist.org/packages/miloschuman/yii2-highcharts-widget)[![Total Downloads](https://camo.githubusercontent.com/9ae0348c2dd7e8c43f0f097035f7d2ca0c1a39449c60d175bf22800dde2e813f/68747470733a2f2f706f7365722e707567782e6f72672f6d696c6f736368756d616e2f796969322d686967686368617274732d7769646765742f646f776e6c6f6164732e706e67)](https://packagist.org/packages/miloschuman/yii2-highcharts-widget)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/251c92499395e3769c1136b6c7c4ca42aca67ef02313a4450c188432ec623a51/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f6d696c6f736368756d616e2f796969322d686967686368617274732f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/miloschuman/yii2-highcharts/?branch=master)

Easily add [Highcharts, Highstock and Highmaps](https://www.highcharts.com/) graphs to your Yii2 application.

[![Screen Shot](https://camo.githubusercontent.com/77811b9f11dded51d425295dbacdfe0b15a17dd7ad47ffc5e744dfd6f94bac36/68747470733a2f2f7777772e7969696672616d65776f726b2e636f6d2f657874656e73696f6e2f796969322d686967686368617274732d7769646765742f66696c65732f73637265656e73686f742e706e67)](https://camo.githubusercontent.com/77811b9f11dded51d425295dbacdfe0b15a17dd7ad47ffc5e744dfd6f94bac36/68747470733a2f2f7777772e7969696672616d65776f726b2e636f6d2f657874656e73696f6e2f796969322d686967686368617274732d7769646765742f66696c65732f73637265656e73686f742e706e67)

About
-----

[](#about)

### Highcharts

[](#highcharts)

> Create interactive charts easily for your web projects. Used by tens of thousands of developers and 59 out of the world's 100 largest companies, Highcharts is the simplest yet most flexible charting API on the market.

### Highstock

[](#highstock)

> Highstock lets you create stock or general timeline charts in pure JavaScript. Including sophisticated navigation options like a small navigator series, preset date ranges, date picker, scrolling and panning.

### Highmaps

[](#highmaps)

> Build interactive maps to display sales, election results or any other information linked to geography. Perfect for standalone use or in dashboards in combination with Highcharts!

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](https://getcomposer.org/download/).

Either run

```
php composer.phar require miloschuman/yii2-highcharts-widget
```

or add

```
"miloschuman/yii2-highcharts-widget": "^8.0"
```

to the require section of your `composer.json` file.

Usage
-----

[](#usage)

### Preferred Method (using PHP arrays)

[](#preferred-method-using-php-arrays)

To use this widget, insert the following code into a view file:

```
use miloschuman\highcharts\Highcharts;

echo Highcharts::widget([
   'options' => [
      'title' => ['text' => 'Fruit Consumption'],
      'xAxis' => [
         'categories' => ['Apples', 'Bananas', 'Oranges']
      ],
      'yAxis' => [
         'title' => ['text' => 'Fruit eaten']
      ],
      'series' => [
         ['name' => 'Jane', 'data' => [1, 0, 4]],
         ['name' => 'John', 'data' => [5, 7, 3]]
      ]
   ]
]);
```

By configuring the `options` property, you can specify the options that need to be passed to the Highcharts JavaScript object. Please refer to the demo gallery and documentation on the [Highcharts website](https://www.highcharts.com/) for possible options.

See [/doc/examples](https://github.com/miloschuman/yii2-highcharts/tree/master/doc/examples) for more usage examples.

### Alternative Method (using JSON string)

[](#alternative-method-using-json-string)

Alternatively, you can use a valid JSON string in place of an associative array to specify options:

```
use miloschuman\highcharts\Highcharts;

echo Highcharts::widget([
   'options'=>'{
      "title": { "text": "Fruit Consumption" },
      "xAxis": {
         "categories": ["Apples", "Bananas", "Oranges"]
      },
      "yAxis": {
         "title": { "text": "Fruit eaten" }
      },
      "series": [
         { "name": "Jane", "data": [1, 0, 4] },
         { "name": "John", "data": [5, 7,3] }
      ]
   }'
]);
```

*Note:* You must provide a *valid* JSON string (with double quotes) when using the second option. You can quickly validate your JSON string online using [JSONLint](https://jsonlint.com/).

### Just the Assets

[](#just-the-assets)

If you merely want to include the Highcharts/Highstock/Highmaps javascript libraries in your view, you can bypass the widget and access the asset bundle directly:

```
use miloschuman\highcharts\HighchartsAsset;

HighchartsAsset::register($this)->withScripts(['modules/stock', 'modules/exporting', 'modules/drilldown']);
```

In this scenario, you would need to write and include your own JavaScript to display the charts, just as illustrated in the [Highcharts Demo](https://www.highcharts.com/demo), [Highstock Demo](https://www.highcharts.com/stock/demo) and [Highmaps Demo](https://www.highcharts.com/maps/demo) pages.

Tips
----

[](#tips)

- As of v10, This extension uses Asset Packagist to load the required Highcharts assets, so there is no need to change the version number in your `composer.json` file until the next major release.

    If you are upgrading from v9.0 or earlier, you will need to add the following to your `composer.json` file:

    ```
    "repositories": [
      {
        "type": "composer",
        "url": "https://asset-packagist.org"
      }
    ]
    ```

    Make sure the previously used fxp/composer-asset-plugin is disabled in your `composer.json` file:

    ```
    "config": {
      "fxp-asset": {
        "enabled": false
      }
    }
    ```

    Then run `composer update` to install the new assets.
- If you need to use JavaScript in any of your configuration options, use Yii's \[\[JsExpression\]\] object. For instance:

    ```
    ...
    'tooltip' => [
       'formatter' => new JsExpression('function(){ return this.series.name; }')
    ],
    ...
    ```

    Note, this is currently only possible when using a PHP associative array ([Preferred Method](#preferred-method-using-php-arrays)) for configuration.
- Highcharts by default displays a small credits label in the lower right corner of the chart. This can be removed using the following top-level option.

    ```
    ...
    'credits' => ['enabled' => false],
    ...
    ```
- All adapters, modules, themes, and supplementary chart types must be enabled through the top-level 'scripts' option.

    ```
    ...
    'scripts' => [
       'highcharts-more',   // enables supplementary chart types (gauge, arearange, columnrange, etc.)
       'modules/exporting', // adds Exporting button/menu to chart
       'themes/grid'        // applies global 'grid' theme to all charts
    ],
    ...
    ```

    For a list of available scripts, see the contents of `vendor/npm/highcharts/`.
- You can access the JavaScript chart object from another script like this:

    ```
    var chart = $('#my-chart-id').highcharts();
    ```

    where `my-chart-id` is set via the top-level `id` configuration option. Just make sure you register your script after the widget declaration so that it has a chance to initialize.
- The top-level `'callback'` option allows you to initialize the chart after an AJAX request or other preprocessing. See included [Highstock Widget Examples](https://github.com/miloschuman/yii2-highcharts/tree/master/doc/examples/highstock.md) for usage.

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance35

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 74.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

602d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/a79c68a3e0b34ad46bf9a68c697b635521d0483b727b02c28f4d6a7e38337e55?d=identicon)[marqu3s](/maintainers/marqu3s)

---

Top Contributors

[![miloschuman](https://avatars.githubusercontent.com/u/487443?v=4)](https://github.com/miloschuman "miloschuman (56 commits)")[![marqu3s](https://avatars.githubusercontent.com/u/2284983?v=4)](https://github.com/marqu3s "marqu3s (10 commits)")[![Mackiavelly](https://avatars.githubusercontent.com/u/11190487?v=4)](https://github.com/Mackiavelly "Mackiavelly (2 commits)")[![acorncom](https://avatars.githubusercontent.com/u/802505?v=4)](https://github.com/acorncom "acorncom (2 commits)")[![demogorgorn](https://avatars.githubusercontent.com/u/7351565?v=4)](https://github.com/demogorgorn "demogorgorn (2 commits)")[![aninfordata](https://avatars.githubusercontent.com/u/46560928?v=4)](https://github.com/aninfordata "aninfordata (1 commits)")[![Myks92](https://avatars.githubusercontent.com/u/31630905?v=4)](https://github.com/Myks92 "Myks92 (1 commits)")[![nadar](https://avatars.githubusercontent.com/u/3417221?v=4)](https://github.com/nadar "nadar (1 commits)")

---

Tags

yii2extensionwidgethighchartshighstockhighmaps

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/marqu3s-yii2-highcharts-widget/health.svg)

```
[![Health](https://phpackages.com/badges/marqu3s-yii2-highcharts-widget/health.svg)](https://phpackages.com/packages/marqu3s-yii2-highcharts-widget)
```

###  Alternatives

[miloschuman/yii2-highcharts-widget

Highcharts widget for Yii 2 Framework.

1761.5M14](/packages/miloschuman-yii2-highcharts-widget)[richardfan1126/yii2-js-register

Yii2 widget to register JS into view

1357.2k7](/packages/richardfan1126-yii2-js-register)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)
