Related
I create some chart in dashboard using react-chart-js.
exmaple
but I have problem now chart not clear. I decided do change chart canvas size move mouse point over the chart . but i can't find solution for that.
i currently use "react-chartjs-2": "3.3.0" and "chart.js": "^3.6.0" packages
i use this option list for draw charts
const options = {
responsive: true,
animation: {
duration: 0,
},
plugins: {
legend: {
fullSize: false,
position: "bottom" as const,
labels: {
display: true,
},
},
title: {
display: true,
color: "white",
font: {
size: 14,
family: "tahoma",
weight: "normal",
style: "italic",
},
text: axis.thresholdValues.sensorName,
},
subtitle: {
display: true,
text: `average: x-axis: ${axis.average.x} y-axis: ${axis.average.y} z-axis: ${axis.average.z}`,
color: "white",
align: "end",
font: {
size: 12,
family: "tahoma",
weight: "normal",
style: "italic",
},
// padding: {
// bottom: 20,
// },
},
zoom: {
pan: {
// pan options and/or events
enabled: true,
speed: 0.01,
},
limits: {
// axis limits
},
zoom: {
// zoom options and/or events
wheel: {
enabled: true,
},
pinch: {
enabled: true,
},
speed: 0.01,
},
},
annotation: {
annotations: {
min: {
// type: 'line',
yMin: axis.thresholdValues.min,
yMax: axis.thresholdValues.min,
borderColor: "#D8D8D8",
// borderWidth: 2,
},
max: {
// type: 'line',
yMin: axis.thresholdValues.max,
yMax: axis.thresholdValues.max,
borderColor: "#DB00FF",
// borderWidth: 2,
},
},
},
tooltip: {
mode: "index",
intersect: false,
},
},
spanGaps: true,
datasets: {
line: {
pointRadius: 0, // disable for all `'line'` datasets
},
},
elements: {
point: {
radius: 0, // default to disabled in all datasets
},
},
transitions: {
zoom: {
animation: {
duration: 0,
},
},
},
scales: {
x: {
title: { display: true, text: "Time", align: "end" },
type: "time",
},
y: {
title: { display: true, text: "second", align: "top" },
},
},
events: ["click"],
hover: {
mode: "nearest",
intersect: false,
},
};
<Line data = {data} option = {option} />
Any one can suggest solution for it.
`
Hi, I wanted to make some nice landing page with tsparticles, but I have problem with it. It just display particles randomly, not in shape of an SVG. Can somebody help me with that
I tried adding domains to nextjs config, using local files. I dont really know what to do, so if anybody has an idea, it would really help me.
`
"use client";
import { useMantineTheme, useMantineColorScheme } from '#mantine/core';
import {Button} from "#mantine/core"
import { useEffect } from 'react';
import MainNavigation from './MainNavigation';
import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import "pathseg";
import "../styles/globals.css";
import Head from 'next/head';
export default function TopSection(props) {
const particlesInit = useCallback(async engine => {
console.log(engine);
await loadFull(engine);
}, []);
const particlesLoaded = useCallback(async container => {
await console.log(container);
}, []);
if (process.browser) {
require("pathseg");
}
return (
<div style={{width: "100%", height: "100VH", display: "flex", flexDirection: "column"}}>
<Head>
<script src="https://cdn.jsdelivr.net/npm/pathseg#1.2.0/pathseg.min.js" />
<script src="https://cdn.jsdelivr.net/npm/tsparticles#1.18.3/dist/tsparticles.min.js" />
</Head>
<MainNavigation />
<div>
<Particles
id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
detectRetina: false,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: false,
mode: "push"
},
onDiv: {
elementId: "repulse-div",
enable: false,
mode: "repulse"
},
onHover: {
enable: true,
mode: "bubble",
parallax: {
enable: false,
force: 2,
smooth: 10
}
},
resize: true
},
modes: {
bubble: {
distance: 40,
duration: 2,
opacity: 8,
size: 6,
speed: 3
},
connect: {
distance: 80,
lineLinked: {
opacity: 0.5
},
radius: 60
},
grab: {
distance: 400,
lineLinked: {
opacity: 1
}
},
push: {
quantity: 4
},
remove: {
quantity: 2
},
repulse: {
distance: 200,
duration: 0.4
},
slow: {
active: false,
radius: 0,
factor: 1
}
}
},
particles: {
color: {
value: ["#4285f4", "#34A853", "#FBBC05", "#EA4335"]
},
lineLinked: {
blink: false,
color: "random",
consent: false,
distance: 40,
enable: true,
opacity: 0.8,
width: 1
},
move: {
attract: {
enable: false,
rotate: {
x: 600,
y: 1200
}
},
bounce: false,
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 1,
straight: false
},
number: {
density: {
enable: false,
area: 2000
},
limit: 0,
value: 200
},
opacity: {
animation: {
enable: true,
minimumValue: 0.3,
speed: 2,
sync: false
},
random: false,
value: 0.8
},
shape: {
character: {
fill: false,
font: "Verdana",
style: "",
value: "*",
weight: "400"
},
image: {
height: 800,
replaceColor: true,
src: "https://particles.js.org/images/github.svg",
width: 800
},
polygon: {
sides: 5
},
stroke: {
color: "#000000",
width: 0
},
type: "circle"
},
size: {
animation: {
enable: false,
minimumValue: 0.1,
speed: 40,
sync: false
},
random: true,
value: 1
}
},
polygon: {
draw: {
enable: false,
lineColor: "rgba(255,255,255,0.2)",
lineWidth: 0.5
},
enable: true,
move: {
radius: 5
},
position: {
x: 30,
y: 10
},
inlineArrangement: "equidistant",
scale: 10,
type: "inline",
url:
"https://upload.wikimedia.org/wikipedia/commons/b/b8/2021_Facebook_icon.svg"
},
background: {
color: "white",
image: "",
position: "50% 50%",
repeat: "no-repeat",
size: "cover"
}
}}
/>
</div>
</div>
);
}
It's not a Next.js or React issue. The configuration of the polygon mask feature was changed in v2. You need to change this piece:
inlineArrangement: "equidistant",
to this:
inline: {
arrangement: "equidistant"
},
I'm using react-chartjs-2.
<HorizontalBar
options={{
legend: {
display: false,
},
tooltips: {
enabled: false,
},
hover: {
mode: null,
},
scales: {
xAxes: [
{
display: false,
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
position: 'right'
},
],
yAxes: [
{
position: "right",
ticks: {
reverse: true,
},
gridLines: {
color: "rgba(0, 0, 0, 0)",
},
},
],
},
plugins: {
tooltip: {
enabled: false,
},
},
}}
data={{
datasets: [
{
label: "My First dataset 2",
borderWidth: 0,
backgroundColor: [
"#68B68A",
"#5B9FC9",
"#83C39F",
"#85B7D6",
"#9FD1B4",
"#C2DAEB",
],
data: ...,
barPercentage: 0.5,
},
],
}}
/>
I need to align horizontal bars to the right side like this
but actual result from my code is this
You could use floating bars for this:
const options = {
type: 'horizontalBar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [
[
20,
12
],
[
20,
19
],
[
20,
3
],
[
20,
5
],
[
20,
2
],
[
20,
14
]
],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
You put the maximum value of your axis as the first or last (chart.js will render it the same) in your array. Then for the other value you enter the start point. So that would be max value - the percentage
I am working with solid gauge. We are upgrading from version 7.2.2 to the latest 9.2. We use to be able to pass in the y-axis plotbands a rounded: true which would round the tips of the bands. Since upgrading this no longer works. Instead the tips are squared off. I am looking for any assistance in how I might handle this.
Here is a fiddle of what it looks like squared off:
fiddle
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '110%',
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
valueSuffix: '%',
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}</span>',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: [
{
"startAngle": -140,
"endAngle": 140,
"background": {
"shape": "arc",
"borderWidth": 0,
"backgroundColor": "#FFF0"
}
}
],
yAxis: [
{
"gridLineWidth": 0,
"opposite": false,
"title": {
"text": "",
"useHTML": true
},
"labels": {
"useHTML": true,
"format": "{value}",
"enabled": false
},
"min": 0,
"max": 100,
"lineWidth": 0,
"tickWidth": 0,
"minorTickWidth": 0,
"plotBands": [
{
"thickness": "10%",
rounded: true,
"from": 0,
"to": 73,
"color": "#1792E555",
},
{
"thickness": "10%",
"from": 76,
"to": 88,
"color": "#FFE393"
},
{
"thickness": "10%",
"from": 91,
"to": 100,
"color": "#F9B890"
}
],
"plotLines": [],
"index": 0
}
],
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
series: [
{
"data": [
{
"y": 10,
"color": "#1792E5"
}
],
"radius": "100%",
"innerRadius": "90%",
linecap: 'rounded',
"rounded": true,
"useDial": false,
"type": "solidgauge",
"tooltip": {
"enabled": true,
"useHTML": true,
"borderRadius": 0,
"borderWidth": 0,
"shadow": false,
"valueDecimals": 2,
"style": {
"fontFamily": "inherit"
},
"padding": 6,
"shape": "square"
},
"dataLabels": {
"style": {
"textOutline": "none"
}
},
"events": {}
}
]
});
Unfortunately, it's not so easy to do. Since the plotBand is an SVG element you can try to edit its path and round the corners but it might be hard. You can check how the rounded path is created here: https://code.highcharts.com/modules/solid-gauge.src.js?_ga=2.104350400.154582566.1629699669-527407293.1629434064
And you can also check out this plugin: https://github.com/highcharts/rounded-corners
But the easiest solution would be to use another solidGauge series instead of plotBand. Something like that: https://jsfiddle.net/BlackLabel/k35vcsnx/
series[{...}, {
type: "solidgauge",
rounded: true,
data: [{
color: "#1792E555",
radius: '100%%',
innerRadius: '90%',
y: 73
}]
}
The datasets plot fine on my line chart but I am trying to get vertical lines to display on the chart using chartjs-plugin-annotation. From looking at these questions & answers:
SOLVED : ChartJS annotation not displaying
https://github.com/chartjs/chartjs-plugin-annotation/issues/209
react-chartjs-2 vertical line when hovering over chart
Chart.js — drawing an arbitrary vertical line
I thought I had the correct configuration but the lines are not appearing.
LineChart.js
import 'chartjs-plugin-annotation'
import React, { useContext } from 'react'
import { Card, CardBody } from 'reactstrap'
import { Line } from 'react-chartjs-2'
import flatten from 'lodash/flatten'
import { rgbaColor, exchangeChartColors, capitalize, exchanges } from '../../helpers/utils'
import AppContext from '../../context/Context'
import dayjs from 'dayjs'
function getDepositsAndWithdrawals(activity) {
return ['DEPOSIT', 'WITHDRAWAL'].reduce((acc, type) => {
if (activity) {
if (activity.betfair) {
acc[type].betfair = activity.betfair.filter(s => {
return s.legacyData.marketName === type
}).map(s => {
return {
exchange: 'BETFAIR',
type: type,
amount: s.amount,
date: getFormattedDate(s.itemDate)
}
})
}
if (activity.betdaq) {
acc[type].betdaq = activity.betdaq.filter(s => {
return s.PostingCategory === 3 && s.Description.toUpperCase().includes(`${type}:`)
}).map(s => {
return {
exchange: 'BETDAQ',
type: type,
amount: s.Amount,
date: getFormattedDate(s.PostedAt)
}
})
}
if (activity.smarkets) {
const typeToGet = (type === 'DEPOSIT') ? 'deposit' : 'withdraw'
acc[type].smarkets = activity.smarkets.filter(s => {
return s.source === typeToGet
}).map(s => {
return {
exchange: 'SMARKETS',
type: type,
amount: parseFloat(s.money_change),
date: getFormattedDate(s.timestamp)
}
})
}
}
return acc
}, {
DEPOSIT: {},
WITHDRAWAL: {}
})
}
function getFormattedDate(date) {
const parsed = dayjs(date)
const day = parsed
.date()
.toString()
.padStart(2, '0')
// Unsure why have to add 1 but don't care really
const mnth = (parsed
.month() + 1)
.toString()
.padStart(2, '0')
const yr = parsed
.year()
.toString()
.padStart(2, '0')
const hr = parsed
.hour()
.toString()
.padStart(2, '0')
const min = parsed
.minute()
.toString()
.padStart(2, '0')
return `${day}/${mnth}/${yr} # ${hr}:${min}`
}
function getXAxis(balances, annotations) {
const balanceDates = balances.map(entry => {
return getFormattedDate(entry.date)
})
const annotationDates = annotations.map(ann => {
return ann.value
})
return [
...balanceDates,
...annotationDates
]
}
const ProfitsLineChart = props => {
const { isDark } = useContext(AppContext)
const depositsAndWithdrawals = getDepositsAndWithdrawals(props.activity)
const annotations = Object.values(depositsAndWithdrawals).reduce((acc, exs) => {
const newEntries = Object.values(exs).map(entries => {
return entries.map(entry => {
return {
type: 'line',
mode: 'vertical',
drawTime: 'afterDatasetDraw',
scaleID: 'x-axis-0',
value: entry.date,
borderColor: isDark
? exchangeChartColors.dark[entry.exchange.toLowerCase()]
: exchangeChartColors.light[entry.exchange.toLowerCase()],
borderWidth: 2,
label: {
content: `${entry.exchange} ~ ${entry.type} ~ ${entry.amount}`,
enabled: true,
position: 'top'
}
}
})
})
return [
...acc,
...flatten(newEntries)
]
}, [])
const config = {
data(canvas) {
let datasets = exchanges.map(exchange => {
return {
exchange,
data: props.balances.reduce((acc, entry) => {
const entryForExchange = entry.balances.find(balance => {
return balance.exchange.toUpperCase() === exchange.toUpperCase()
})
if (entryForExchange) {
acc.push({
date: entry.date,
balance: entryForExchange.balance
})
}
return acc
}, [])
}
})
let labels = getXAxis(props.balances, annotations)
// If not specified time period, only show most recent (30) entries
if (!props.start && !props.end) {
datasets = datasets.map(ds => {
return {
...ds,
data: ds.data.slice(ds.data.length - 50, ds.data.length)
}
})
labels = labels.slice(labels.length - 50, labels.length)
}
return {
labels,
datasets: datasets.map(set => {
return {
label: capitalize(set.exchange),
borderWidth: 2,
fill: false,
data: set.data.map(s => s.balance.toFixed(2)),
borderColor: isDark ? exchangeChartColors.dark[set.exchange.toLowerCase()] : exchangeChartColors.light[set.exchange.toLowerCase()],
backgroundColor: isDark ? exchangeChartColors.dark[set.exchange.toLowerCase()] : exchangeChartColors.light[set.exchange.toLowerCase()]
}
})
}
},
options: {
annotation: {
annotations
},
responsive: true,
title: {
display: true,
text: 'Balances',
fontSize: 20,
fontStyle: 'bold',
lineHeight: 2.5,
fontColor: rgbaColor('#cccccc', 0.7)
},
legend: {
labels: {
fontSize: 16,
fontStyle: 'italic',
fontColor: rgbaColor('#cccccc', 0.7)
},
display: true,
position: 'bottom'
},
tooltips: {
mode: 'index',
displayColors: true
},
hover: {
mode: 'label'
},
scales: {
xAxes: [
{
display: true,
id: 'x-axis-0',
scaleLabel: {
display: true,
labelString: 'Time',
fontSize: 12,
fontColor: rgbaColor('#cccccc', 0.7)
},
ticks: {
callback: () => '',
fontColor: rgbaColor('#cccccc', 0.7),
fontStyle: 600
}
}
],
yAxes: [
{
display: true,
id: 'y-axis-0',
scaleLabel: {
display: true,
labelString: 'Balance (£)',
fontSize: 14,
fontColor: rgbaColor('#cccccc', 0.7)
},
ticks: {
min: 0,
fontColor: rgbaColor('#cccccc', 0.7),
fontStyle: 600
}
}
]
}
}
}
return !props.balances.length ? (
<Card className="text-center mb-3">
<CardBody className="p-5">
<div className="display-2 text-200">No Data</div>
<p className="lead mt-4 text-800 text-sans-serif font-weight-semi-bold">There are no balances to display.</p>
<hr />
<p>Please edit your time period search (or remove it altogether) to see data</p>
</CardBody>
</Card>
) : (
<Card className="mb-3">
<CardBody className="rounded-soft bg-gradient">
<Line data={config.data} options={config.options} />
</CardBody>
</Card>
)
}
export default ProfitsLineChart
This is the config that is spit out that the chart is using:
{
"options": {
"annotation": {
"annotations": [
{
"type": "line",
"mode": "vertical",
"drawTime": "afterDatasetDraw",
"scaleID": "x-axis-0",
"value": "08/03/2020 # 14:47",
"borderColor": "rgba(239, 131, 0, 0.8)",
"borderWidth": 2,
"label": {
"content": "BETFAIR ~ DEPOSIT ~ 22",
"enabled": true,
"position": "top"
}
},
{
"type": "line",
"mode": "vertical",
"drawTime": "afterDatasetDraw",
"scaleID": "x-axis-0",
"value": "03/03/2020 # 23:04",
"borderColor": "rgba(119, 0, 255, 0.8)",
"borderWidth": 2,
"label": {
"content": "BETDAQ ~ DEPOSIT ~ 26.57",
"enabled": true,
"position": "top"
}
},
{
"type": "line",
"mode": "vertical",
"drawTime": "afterDatasetDraw",
"scaleID": "x-axis-0",
"value": "19/03/2020 # 17:57",
"borderColor": "rgba(68, 254, 59, 0.8)",
"borderWidth": 2,
"label": {
"content": "SMARKETS ~ DEPOSIT ~ 21",
"enabled": true,
"position": "top"
}
},
{
"type": "line",
"mode": "vertical",
"drawTime": "afterDatasetDraw",
"scaleID": "x-axis-0",
"value": "27/03/2020 # 12:55",
"borderColor": "rgba(239, 131, 0, 0.8)",
"borderWidth": 2,
"label": {
"content": "BETFAIR ~ WITHDRAWAL ~ -10",
"enabled": true,
"position": "top"
}
},
{
"type": "line",
"mode": "vertical",
"drawTime": "afterDatasetDraw",
"scaleID": "x-axis-0",
"value": "27/03/2020 # 13:02",
"borderColor": "rgba(119, 0, 255, 0.8)",
"borderWidth": 2,
"label": {
"content": "BETDAQ ~ WITHDRAWAL ~ -10",
"enabled": true,
"position": "top"
}
},
{
"type": "line",
"mode": "vertical",
"drawTime": "afterDatasetDraw",
"scaleID": "x-axis-0",
"value": "01/03/2020 # 09:45",
"borderColor": "rgba(68, 254, 59, 0.8)",
"borderWidth": 2,
"label": {
"content": "SMARKETS ~ WITHDRAWAL ~ -26.57",
"enabled": true,
"position": "top"
}
}
]
}
},
"responsive": true,
"title": {
"display": true,
"text": "Balances",
"fontSize": 20,
"fontStyle": "bold",
"lineHeight": 2.5,
"fontColor": "rgba(204,204,204,0.7)"
},
"legend": {
"labels": {
"fontSize": 16,
"fontStyle": "italic",
"fontColor": "rgba(204,204,204,0.7)"
},
"display": true,
"position": "bottom"
},
"tooltips": {
"mode": "index",
"displayColors": true
},
"hover": {
"mode": "label"
},
"scales": {
"xAxes": [
{
"display": true,
"id": "x-axis-0",
"scaleLabel": {
"display": true,
"labelString": "Time",
"fontSize": 12,
"fontColor": "rgba(204,204,204,0.7)"
},
"ticks": {
"fontColor": "rgba(204,204,204,0.7)",
"fontStyle": 600
}
}
],
"yAxes": [
{
"display": true,
"id": "y-axis-0",
"scaleLabel": {
"display": true,
"labelString": "Balance (£)",
"fontSize": 14,
"fontColor": "rgba(204,204,204,0.7)"
},
"ticks": {
"min": 0,
"fontColor": "rgba(204,204,204,0.7)",
"fontStyle": 600
}
}
]
}
}
I can't think as to why this is not working as intended. getXAxis ensures that the string timestamps of the annotations are added to the X-Axis as well. I'm lost for ideas
Look at this:
https://github.com/reactchartjs/react-chartjs-2/issues/201#issuecomment-579630734
and here, for vertical line instead of horizontal, write
mode: 'vertical',