Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
ember-highcharts
Advanced tools
A Highcharts, Highstock, and Highmaps component for Ember CLI.
ember install ember-highcharts
This component takes in five arguments:
<HighCharts
@mode={{this.mode}}
@chartOptions={{this.chartOptions}}
@content={{this.content}}
@theme={{this.theme}}
@callback={{this.callBackFunc}}
/>
The mode
argument is optional and it determines whether to use Highcharts, Highstock, or Highmaps.
The possible values are:
Value | Description |
---|---|
falsy value | defaults to Highcharts mode |
"StockChart" | uses Highstock mode |
"Map" | uses Highmaps mode |
"Gantt" | uses Highcharts Gantt mode |
The chartOptions
argument is a generic object for setting different options with Highcharts/Highstock/Highmaps.
Use this option to set things like the chart title and axis settings.
The content
argument matches up with the series
option in the Highcharts/Highstock/Highmaps API.
Use this option to set the series data for your chart.
The theme
argument is optional and it allows you to pass in a
Highcharts theme.
The callback
argument is optional and allows you to pass in a function that runs when the chart has finished loading (API).
Here's an example of how to create a basic bar chart:
// component.js
import Component from '@glimmer/component';
import defaultTheme from '../themes/default-theme';
export default class BarBasic extends Component {
chartOptions = {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
}
}
chartData = [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}];
theme = defaultTheme
}
<HighCharts
@chartOptions={{this.chartOptions}}
@content={{this.chartData}}
@theme={{this.theme}}
/>
Check out more chart examples in the tests/dummy app in this repo.
This addon will load Highcharts by default. Highcharts has many optional features like Highstock and Highmaps.
You can add the emberHighCharts
option to your ember-cli-build.js
file to load these optional features:
// all possible options
var app = new EmberApp({
emberHighCharts: {
includeHighCharts: false,
includeHighStock: true,
includeHighMaps: false,
includeHighChartsMore: true,
includeHighCharts3D: true,
includeModules: ['map', 'broken-axis', 'heatmap', ... ]
/* Some available modules include:
boost, broken-axis, canvas-tools, data, drilldown, exporting, funnel,
heatmap, map, no-data-to-display, offline-exporting, solid-gauge, treemap.
*/
}
});
All modules can be found here.
Highcharts is already included in Highstock, so it is not necessary to load both. Using the following configuration to load Highstock:
var app = new EmberApp({
emberHighCharts: {
includeHighCharts: false,
includeHighStock: true
}
});
Highcharts is not included in Highmaps. If you only need to use Highmaps use the following configuration:
var app = new EmberApp({
emberHighCharts: {
includeHighCharts: false,
includeHighMaps: true
}
});
If you need to use Highmaps and Highcharts then use the following configuration:
var app = new EmberApp({
emberHighCharts: {
includeHighCharts: true,
includeModules: ['map']
}
});
Ember-highcharts provides its own set of default configurations in addon/utils/option-loader.js
.
At runtime you can optionally configure custom styles by providing a app/highcharts-configs/application.js
file.
This file should provide a hook that returns the final configuration.
// app/highcharts-configs/application.js
export default function(defaultOptions) {
defaultOptions.credits.href = 'http://www.my-great-chart.com';
defaultOptions.credits.text = 'great charts made cheap';
defaultOptions.credits.enabled = true;
return defaultOptions;
}
Ember-highcharts also provides blueprints to easily create sub-classes of the default high-charts component.
ember generate chart <chart-name>
The chart
instance is exposed to the yielded content if used in block form:
<HighCharts
@mode={{this.mode}}
@chartOptions={{this.chartOptions}}
@content={{this.content}}
@theme={{this.theme}}
as |chart|
>
<MyCustomLegend @chart={{chart}}>
</HighCharts>
where <MyCustomLegend>
is an example component that may wish to access the chart
instance.
See CHANGELOG.md.
Highcharts has its own seperate licensing agreement.
The ember-highcharts addon is released under the MIT license.
This add-on is built based on the gist and medium by @poteto
FAQs
A Highcharts, HighStock and HighMaps component for ember cli
The npm package ember-highcharts receives a total of 3,976 weekly downloads. As such, ember-highcharts popularity was classified as popular.
We found that ember-highcharts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.