I am trying to use something like that :
If you can give me working example with react and packedbubble it will be very helpful.
the issue that I am using react and trying to do something like:
constructor(props) {
super(props);
this.state = {
options: {
title: {
text: 'My chart'
},
series: [{
data: [1, 2, 3]
}]
}
}
}
render() {
return (
<HighchartsReact highcharts = {Highcharts} options={this.state.options}/>
);
}
To create packedbubble you have to load highcharts-more module:
require("highcharts/highcharts-more")(Highcharts);
Demo:
https://codesandbox.io/s/highcharts-react-demo-8pkxr
Related
I am currently building a grouped bar chart, with two different datasets using chart.js. The code in the component.js file is as follows:
createChart(){
var lbls = ['Selling', 'Cost', 'Gross'];
var curYearData = [2345, 1234, 1111];
var preYearData = [3456, 2345, 1111];
var ctx = document.getElementById(‘barChart') as HTMLCanvasElement;
var barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: lbls,
datasets: [
{
label: ‘2020',
data: curYearData,
backgroundColor: 'blue',
},
{
label: ‘2019',
data: preYearData,
backgroundColor: 'red',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
However, I see no data displayed and instead I get an empty screen. How to create a grouped bar chart in chart.js?
There are two problems in your code.
First you don't correctly retrieve the 2D-Context.
var ctx = document.getElementById('barChart').getContext('2d');
Further you have some strange apostrophes that need to be changed.
Please have a look at your amended code below.
var lbls = ['Selling', 'Cost', 'Gross'];
var curYearData = [2345, 1234, 1111];
var preYearData = [3456, 2345, 1111];
var ctx = document.getElementById('barChart').getContext('2d');
var barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: lbls,
datasets: [{
label: '2020',
data: curYearData,
backgroundColor: 'blue',
},
{
label: '2019',
data: preYearData,
backgroundColor: 'red',
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="barChart"></canvas>
I found this example that half does what I need. I would need it to show two series, not just one.
events: {
show: function () {
var chart = this.chart,
series = chart.series,
i = series.length,
otherSeries;
while (i--) {
otherSeries = series[i];
if (otherSeries != this && otherSeries.visible) {
otherSeries.hide();
}
}
},
legendItemClick: function() {
if(this.visible){
return false;
}
}
}
http://jsfiddle.net/tK38J/65/
For example: I click series 1 and I see series 1 and 2. I click series 3 and I see series 3 and 4.
Series 2 and 4 will be hidden in the legend.
Is it possible?
You can link series with the same visibility and hide the other ones in legendItemClick event:
plotOptions: {
series: {
events: {
legendItemClick: function() {
if (this.visible) {
return false;
}
this.chart.series.forEach(function(s) {
if (s !== this && s !== this.linkedSeries[0]) {
s.hide();
}
}, this);
}
}
}
},
series: [{
data: [...],
id: 'first'
}, {
data: [...],
linkedTo: 'first'
}, {
data: [...],
visible: false,
id: 'third'
}, {
data: [...],
linkedTo: 'third'
}]
Live demo: http://jsfiddle.net/BlackLabel/s6x37azb/
API Reference: https://api.highcharts.com/highcharts/series.line.linkedTo
I'm using angular 2, firebase and ng2-highcharts.
I assign data after I receive them from firebase like so :
this.items = af.database.list('/items');
this.optionsAsync = this.items.map(data => {
this.options.series[0].data = data.map(item => ([item.x, item.y]));
return this.options;
});
Then in my view template I have :
<div [ng2-highcharts]="optionsAsync | async"></div>
This is working fine at first load. But unfortunately when new data are received chart is not updated. Any idea ?
I found a solution by referencing highcharts component with #ViewChild like so :
in component class :
import { ViewChild, Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [Ng2Highcharts]
})
export class AppComponent {
#ViewChild(Ng2Highcharts)
chartElement: Ng2Highcharts;
private chartData = {
chart: {
zoomType: 'x'
},
colors: ['rgba(255,0,255,1)'],
title: {
text: 'Items'
},
credits: '',
series: [{
type: 'area',
name: 'Items',
data: []
}]
};
chartData$ = new Subject();
ngOnInit() {
this.items.subscribe((data: any) => {
this.chartData.series[0].data = data.map(item => ([item.x, parseFloat(item.y)]) );
this.chartData$.next(this.chartData);
if(this.chartElement && this.chartElement.chart) {
var serieRef = this.chartElement.chart.series[0];
serieRef.setData(this.chartData.series[0].data);
}
});
}
}
I am trying to use ng2-highcharts in my application. But after importing the necessary classes using the statement
import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts';**
if I try to specify these classes in the array of directives in my component (directives: [Ng2Highcharts]), I am getting the following error in my console.
[TypeError: require is not a function][1]
My System.config looks as follows
System.config
Can someone tell me what I am missing here ?
You need to define 'ng2-highchart' within your SystemJS configuration:
<script>
System.config({
map: {
'ng2-highchart': 'node_modules/ng2-highchart'
},
(...)
});
</script>
See this question for more details:
How to use highcharts with angular 2?
Here is my candlestick sample... see if this helps.
import { Component } from '#angular/core';
import {JSONP_PROVIDERS, Jsonp} from '#angular/http';
import { CHART_DIRECTIVES } from 'angular2-highcharts';
#Component({
selector: 'high-chart',
directives: [CHART_DIRECTIVES],
providers: [JSONP_PROVIDERS],
template: `
<h2> This is HighChart CandleStick component </h2>
<chart type="StockChart" [options]="options3"></chart>
`
})
export class HighChartsComponent {
options3: Object;
constructor(jsonp : Jsonp) {
jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => {
this.options3 = {
title : { text : 'CandleSticks' },
rangeSelector : {
selected : 1
},
series : [{
type : 'candlestick',
name : 'CandleSticks',
data : res.json(),
dataGrouping : {
units : [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
},
tooltip: {
valueDecimals: 2
}
}]
};
});
}
Remove format: 'register' from you packages. This will help it detect the right format. Or you can add the format as follows:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
"node_modules/ng2-highcharts": {
format: 'cjs',
defaultExtension: 'js'
}
},
map: {
"ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
},
paths: {
"ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
}
});
I am trying to build a chart from JS that has multiple "y:" data points in multiple series. I have got the chart working fine using a static configuration, but am struggling to get it to work when adding the points via the API.
I am trying to acheive:
'series':[
{
'name':'Series 1',
'color':'#FF8500',
'data':[
{
'y':1.0002193448599428
},
{
'y':0.4999027241865406
},
{
'y':4.499986649534549
},
{
'y':0.4998817439627601
}
]
},
{
'name':'Series 2',
'color':'#66B3FF',
'data':[
{
'y':12.99999999901047
},
{
'y':13.00000000082946
},
{
'y':18.99999999841384
},
{
'y':5.000000001018634
}
]
},
My code so far looks like this:
var options = {
'chart':{
'renderTo':'MyChart',
'zoomType':'xy',
'defaultSeriesType':'bar',
'width':880
},
<snip>
...
</snip>
'yAxis':{
'title':{
'text':'Seconds'
},
},
'xAxis':{
'title':{
'text':'Objects'
},
'categories': [],
'opposite':true
},
'series':[
{
'name':'Series 1',
'color':'#FF8500',
'data':[]
},
'series':[
{
'name':'Series 2',
'color':'#66B3FF',
'data':[]
}
]
};
options.chart.renderTo = targetdiv;
//Categories add perfectly here:
$.each(harfile.log.entries, function(i, val) {
options.xAxis.categories.push(val.request.url);
console.log(val.request.url);
});
$.each(harfile.log.entries, function(i, val) {
//need to do some logic to catch "-1" for all these values...
options.series[0].data.push("y:" + val.timings.receive);
});
$.each(harfile.log.entries, function(i, val) {
//need to do some logic to catch "-1" for all these values...
options.series[1].data.push(y:" + val.timings.receive);
});
console.log(options.series[0].data);
This produces a "TypeError: Cannot call method 'push' of undefined"
Just use Highcharts API's series.addPoint().