We Keep Coding

Cannot assign to read only property 'constructor' of object '[object Object]' in g2.js

i am using angular 11 and i am using latest version of #antv/g2 and #antv/data-set package in angular 11
I do not understand why i have to encounter this error. please help me to resolve this error and thanks in advance.
below is error image that i have faced.
Error Image
This is my code.
Dashboard.component.ts
import { Chart } from '#antv/g2';
var DataSet = require('#antv/data-set');
ngAfterViewInit() {
// TODO:
const chart1 = this.genChart1();
const chart2 = this.genChart2();
// NOTE:
this.settings.notice.subscribe(res => {
chart1.forceFit();
chart2.forceFit();
});
}
// Line chart
genChart1() {
const data = [
{ date: '2019-6-24', indicator: 'UV', count: 7 },
{ date: '2019-6-24', indicator: 'Download', count: 3.9 },
{ date: '2019-6-25', indicator: 'UV', count: 6.9 },
{ date: '2019-6-25', indicator: 'Download', count: 4.2 },
{ date: '2019-6-26', indicator: 'UV', count: 9.5 },
{ date: '2019-6-26', indicator: 'Download', count: 5.7 },
{ date: '2019-6-27', indicator: 'UV', count: 14.5 },
{ date: '2019-6-27', indicator: 'Download', count: 8.5 },
{ date: '2019-6-28', indicator: 'UV', count: 18.4 },
{ date: '2019-6-28', indicator: 'Download', count: 11.9 },
{ date: '2019-6-29', indicator: 'UV', count: 21.5 },
{ date: '2019-6-29', indicator: 'Download', count: 15.2 },
{ date: '2019-6-30', indicator: 'UV', count: 25.2 },
{ date: '2019-6-30', indicator: 'Download', count: 17 },
{ date: '2019-7-1', indicator: 'UV', count: 26.5 },
{ date: '2019-7-1', indicator: 'Download', count: 16.6 },
{ date: '2019-7-2', indicator: 'UV', count: 23.3 },
{ date: '2019-7-2', indicator: 'Download', count: 14.2 },
{ date: '2019-7-3', indicator: 'UV', count: 18.3 },
{ date: '2019-7-3', indicator: 'Download', count: 10.3 },
{ date: '2019-7-4', indicator: 'UV', count: 13.9 },
{ date: '2019-7-4', indicator: 'Download', count: 6.6 },
{ date: '2019-7-5', indicator: 'UV', count: 9.6 },
{ date: '2019-7-5', indicator: 'Download', count: 4.8 },
];
// const chart = new G2.Chart({
const chart = new Chart({
container: 'chart1',
forceFit: true,
height: 300,
padding: [20, 20, 80, 50],
});
chart.source(data, {
date: {
alias: '',
type: 'time',
mask: 'MM-DD',
},
});
chart.tooltip({
crosshairs: {
type: 'line',
},
});
chart.axis('count', {
label: {
formatter: function formatter(val) {
return val + 'K';
},
},
});
chart
.line()
.position('date*count')
.color('indicator');
chart
.point()
.position('date*count')
.color('indicator')
.size(4)
.shape('circle')
.style({
stroke: '#fff',
lineWidth: 1,
});
chart.render();
return chart;
}
// Pie chart
genChart2() {
const text = ['MIDNIGHT', '3 AM', '6 AM', '9 AM', 'NOON', '3 PM', '6 PM', '9 PM'];
const data = [];
for (let i = 0; i < 24; i++) {
const item: any = {};
item.type = i + '';
item.value = 10;
data.push(item);
}
const DataView = DataSet.DataView;
const dv = new DataView();
dv.source(data).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent',
});
// const chart = new G2.Chart({
const chart = new Chart({
container: 'chart2',
forceFit: true,
height: 300,
padding: 50,
});
chart.legend(false);
chart.tooltip({
showTitle: false,
});
const bgView: any = chart.view();
bgView.coord('theta', {
innerRadius: 0.9,
});
bgView.source(dv);
bgView
.intervalStack()
.position('percent')
.color('type', ['rgba(255, 255, 255, 0)'])
.style({
stroke: '#444',
lineWidth: 1,
})
.tooltip(false)
.select(false);
bgView.guide().text({
position: ['50%', '50%'],
content: '24 hours',
style: {
lineHeight: '240px',
fontSize: '30',
fill: '#262626',
textAlign: 'center',
},
});
const intervalView = chart.view();
intervalView.source(data);
intervalView.coord('polar', {
innerRadius: 0.9,
});
intervalView.axis(false);
intervalView
.interval()
.position('type*value')
.size('type', val => {
if (val % 3 === 0) {
return 4;
} else {
return 0;
}
})
.color('#444')
.tooltip(false)
.label('type', val => {
if (val % 3 === 0) {
return text[val / 3];
}
return '';
});
const userData = [
{ type: 'A', value: 60 },
{ type: 'B', value: 10 },
{ type: 'C', value: 10 },
{ type: 'D', value: 40 },
{ type: 'E', value: 20 },
{ type: 'F', value: 10 },
{ type: 'G', value: 30 },
{ type: 'H', value: 30 },
];
const userDv = new DataView();
userDv.source(userData).transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent',
});
const pieView = chart.view();
pieView.source(userDv, {
percent: {
formatter: function formatter(val) {
return (val * 100).toFixed(2) + '%';
},
},
});
pieView.coord('theta', {
innerRadius: 0.75,
});
pieView
.intervalStack()
.position('percent')
.color('type')
.label('type', {
offset: 40,
})
.select(false);
chart.render();
return chart;
}
Dashboard.component.html
<div class="matero-row" fxLayout="row wrap">
<!-- Charts -->
<div class="matero-col" fxFlex.gt-sm="60" fxFlex="100">
<mat-card>
<mat-card-subtitle>Traffic</mat-card-subtitle>
<mat-card-content>
<div id="chart1"></div>
</mat-card-content>
</mat-card>
</div>
<div class="matero-col" fxFlex.gt-sm="40" fxFlex="100">
<mat-card>
<mat-card-subtitle>User Behavier</mat-card-subtitle>
<mat-card-content>
<div id="chart2"></div>
</mat-card-content>
</mat-card>
</div>
</div>
please help me.

You can't assign a constructor here :
const DataView = DataSet.DataView;
const dv = new DataView();
According to the docs :
const dv0 = new DataSet.DataView();

Adding style to div element in React ParticleJS

I am trying to add style to the div element which gets created while adding particle component in React. I am adding the style in Component and not in the options params provided by tsparticles. But the height and visibility properties is getting added to the canvas. Please see attached screenshot in the post.
<Particles
className="react-particles"
id="particles-js"
style={
{
visibility: "hidden"
}
}
options={{
background: {
color: {
value: "#3e1110"
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: false,
mode: "push",
},
onHover: {
enable: false,
mode: "repulse"
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4
}
}
},
canvas:{
w: "500",
h: "500"
},
particles: {
number: {
value: 40,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#722035"
},
shape: {
type: "edge",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
"nb_sides": 5
},
image: {
src: "img/github.svg",
width: 50,
height: 50
}
},
opacity: {
value: 0.749690259550659,
random: true,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 3,
size_min: 1,
sync: false
}
},
line_linked: {
enable: false,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 3,
direction: "top-right",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "repulse"
},
onclick: {
enable: false,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: 0.4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
detectRetina: true,
}}
/>

Adding TSParticles params in React Particle

I am trying to replicate ts particle params to use in React particles. I used the same params what are working in tsparticles, But in React it is not getting displayed.
Here are the below config params for both TsParticle and React Particle.
TSParticles
particles: {
number: { value: 10, density: { enable: true, value_area: 9999999 } },
color: { value: "#ffffff" },
shape: {
type: "square",
stroke: { width: 0, color: "#000000" },
image: { src: "img/github.svg", width: 50, height: 50 }
},
opacity: {
value: 1,
random: true,
anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
},
line_linked: {
enable: false,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 0.5,
direction: "bottom-right",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 600 }
}
},
interactivity: {
detect_on: "canvas",
events: {
resize: true
},
modes: {
grab: { distance: 191.80819180819182, line_linked: { opacity: 1 } },
bubble: { distance: 250, size: 0, duration: 2, opacity: 0, speed: 3 },
repulse: { distance: 695.3046953046953, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
React Particles
particles: {
number: { value: 10, density: { enable: true, value_area: 99999 } },
color: { value: "#ffffff" },
shape: {
type: "square",
stroke: { width: 0, color: "#000000" },
image: { src: "img/github.svg", width: 50, height: 50 }
},
opacity: {
value: 1,
random: true,
anim: { enable: true, speed: 1, opacity_min: 0, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 4, size_min: 0.3, sync: false }
},
move: {
enable: true,
speed: 0.5,
direction: "top-left",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 600 }
},
interactivity: {
detect_on: "canvas",
events: {
resize: true
}
},
},
Link for both TsParticles and React Particles
TSParticle
React Particle

Highcharts Stacked Range z-Index

Looking at this script: (JsFiddle isn't displaying the graphs for me, for some reason, but it works as html)
I have two overlapping ranges but I'm unable to have one pair bring blue to the front, the other black. Click on 'Task 2' to see that the above blue range is hidden.
I've tried using the z-index option but I can only set it by series not by pair.
Full code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container1" style="min-width: 400px; height: 200px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 200px; margin: 0 auto"></div>
<script>
$(function () {
window.chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'columnrange',
inverted: true
},
title: {
text: "Top Chart"
},
xAxis: {
categories: ['Customer A', 'Customer B']
},
yAxis: {
labels: {
formatter: function () {
return Math.abs(this.value);
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
legend: {
enabled: true
},
plotOptions: {
columnrange: {
grouping: false
}
},
series: [{
name: 'Task 1',
stack: 'Tasks',
data: [{
x: 0,
low: -5,
high: 5
}, {
x: 1,
low: -15,
high: 15
}]
}, {
name: 'Task 2',
stack: 'Tasks',
data: [{
x: 0,
low: -10,
high: 10
}, {
x: 1,
low: -3,
high: 3
}]
}]
});
});
</script>

One of the way for achieving this is to provide pointPadding to specific series in charts. This option allows both bars to be visible even it is overlapping each other.
plunker demo
series: [{
name: 'Task 1',
stack: 'Tasks',
data: [{
x: 0,
low: -5,
high: 5
}, {
x: 1,
low: -15,
high: 15
}]
}, {
name: 'Task 2',
stack: 'Tasks',
pointPadding: 0.3, /*pointPadding to specific series*/
data: [{
x: 0,
low: -10,
high: 10
}, {
x: 1,
low: -3,
high: 3
}]
}]

How to change the onClick function of C3 load function

I am trying to update a C3 graph with different onclick funtion by using the load function of C3.
The code snippet is here:
var json1 = [{
date: '2014-01-01',
upload: 200,
download: 200,
total: 400
}, {
date: '2014-01-02',
upload: 100,
download: 300,
total: 400
}, {
date: '2014-02-01',
upload: 300,
download: 200,
total: 500
}, {
date: '2014-02-02',
upload: 400,
download: 100,
total: 500
}];
var json2 = [{
date: '2014-01-01',
upload: 200,
download: 500,
total: 700
}, {
date: '2014-01-02',
upload: 500,
download: 450,
total: 950
}, {
date: '2014-02-01',
upload: 200,
download: 800,
total: 1000
}, {
date: '2014-02-02',
upload: 300,
download: 500,
total: 800
}];
var chart = c3.generate({
bindto: '#div1',
data: {
json: json1,
onclick: function (event) {
console.log("11111111111") ;
},
keys: {
x: 'date',
value: ['upload', 'download']
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if (x.getDate() === 1) {
return x.toLocaleDateString();
}
}
}
}
}
});
setTimeout(function () {
chart.unload();
}, 1000);
setTimeout(function () {
chart.load({
json: json2,
keys: {
x: 'date',
value: ['upload', 'download']
},
onclick: function (event) {
console.log("22222222") ;
},
});
}, 1000);
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.10/d3.min.js"></script>
<div id="div1"></div>
Please tell me a way so to update the onClick funtion on the load function itself.

From what I can find, c3.load() does not offer all the elements of c3.generate(), therefore you have 2 ways of doing this.
Reuse c3.generate(), or hand off the click event to a variable that you can change, such as:
// INITIAL CLICK HANDLER
var clickhandler = function(event) {
console.log("11111111111");
}
var json1 = [{
date: '2014-01-01',
upload: 200,
download: 200,
total: 400
}, {
date: '2014-01-02',
upload: 100,
download: 300,
total: 400
}, {
date: '2014-02-01',
upload: 300,
download: 200,
total: 500
}, {
date: '2014-02-02',
upload: 400,
download: 100,
total: 500
}];
var json2 = [{
date: '2014-01-01',
upload: 200,
download: 500,
total: 700
}, {
date: '2014-01-02',
upload: 500,
download: 450,
total: 950
}, {
date: '2014-02-01',
upload: 200,
download: 800,
total: 1000
}, {
date: '2014-02-02',
upload: 300,
download: 500,
total: 800
}];
// GENERATE CHART FROM JSON1
var chart = c3.generate({
bindto: '#div1',
data: {
json: json1,
onclick: function(event) { clickhandler(event) },
keys: {
x: 'date',
value: ['upload', 'download']
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if (x.getDate() === 1) {
return x.toLocaleDateString();
}
}
}
}
}
});
// MAKE CHANGES TO THE LOADED CHART
setTimeout(function () {
// CHANGE THE CLICK EVENT HANDLER
clickhandler = function(event) {
console.log('22222222222');
};
// UNLOAD EXISTING DATA AND LOAD NEW DATA FROM JSON2
chart.load({
json: json2,
keys: {
x: 'date',
value: ['upload', 'download']
},
unload: chart.columns
});
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<div id="div1"></div>