I want to introduce a Packed circle chart (a variation of bubble chart which contains only the radius as its dimension). React Chartjs and even Chartjs support only Bubble chart but not Packed circle chart. Here is an example of the expected chart I want to add
Can I get something like this using react-chartjs? For example, one needs to do something like below for a regular initiation of a bubble chart.
const defaultDatasets = [
{
label: ["China"],
backgroundColor: "rgba(255,221,50,0.2)",
borderColor: "rgba(255,221,50,1)",
data: [{
x: 735,
y: 50,
r: 15
}]
}, {
label: ["Denmark"],
backgroundColor: "rgba(60,186,159,0.2)",
borderColor: "rgba(60,186,159,1)",
data: [{
x: 116,
y: 50,
r: 10
}]
}, {
label: ["Germany"],
backgroundColor: "rgba(0,0,0,0.2)",
borderColor: "#000",
data: [{
x: 2116,
y: 50,
r: 15
}]
}
]
Since my requirement is a Packed circle chart, so I have two options.
I could omit x and y values. But then all bubbles get messed up.
I could randomise the x and y values and hide the axes. But then the randomisation won't guarantee any bubble overlapping or may bring some bubbles concentrated to one point.
Is there any hack or workaround to show bubbles in a nice order like in the picture above?
Related
I am making a chart displaying stock data using ChartJs (react-chartjs-2). I have a datapoint for every minute from 9:30am to 3:59pm. When I plot it, my chart looks like the image below. The points don't even remotely align with the grid. The point in the image says 10:16 but the chart positions it between 9 and 10. Why is it like this? The points should also start halfway after the 9 tick since my data starts at 9:30. Does anyone know what I can do to resolve this?
My data is in the format like x = 2023-02-15 09:30:00-05:00 and y = 226.145. I have an option that truncates what is displayed on the tick so instead of displaying the entire datetime format, it only displays the hour.
Here is some of my code:
const data = {
labels: Object.keys(stockdata),
datasets: [
{
data: Object.values(stockdata),
borderColor: "rgba(75,192,192,1)",
},
],
};
const options = {
responsive: true,
plugins: {
legend: {
position: "top",
},
title: {
display: true,
text: "Chart.js Line Chart",
},
},
pointRadius: 0,
scales: {
x: {
ticks: {
callback: function (val) {
const time = parseInt(
this.getLabelForValue(val).split(" ")[1].split(":")[0] % 12
);
return time == 0 ? 12 : time;
},
maxTicksLimit: 7,
},
grid: {
color: "#303030",
},
},
y: {
grid: {
color: "#303030",
},
},
},
};
React component render:
<Line data={data} options={options} />
I assume the issue is, that your localtime has a date offset off -1 hours, but without seeing the data (and knowing the offset), I can't say for sure.
If this would be the case, you could/would have to convert your dataset values. Depending on your dataset and available libraries you could use functions like:
momentjs:
let localDate= moment.utc("2023-02-01 10:00:00")
.local()
.format("YYYY-MM-DD HH:mm:ss");
vanilajs:
let localDate = new Date(Date.UTC(2023, 1, 1, 10, 0, 0));
You would have to loop through all the x-values / dates entries, to fix this.
In a dual axes graph I am trying to plot a chart that has a green line overlayed on an area (with range). Therefor, between the blue lines (which are generated from dataSet1), I would like to have a background color
I have the following configuration:
const config: any = {
data: [dataSet1,dataSet2],
xField: 'year',
yField: ['price','price'],
legend: false,
geometryOptions: [
{
geometry: 'line',
},
{
geometry: 'line',
color: 'green',
lineStyle: {
lineWidth: 4,
},
point: {
shape: 'breath-point',
},
},
],
};
<DualAxes {...config} />
I have tried multiple things, like setting an isRange: true, area: true, area: 'red' in various parts of the config but I am unable to get it done.
NOTE: a dual axes graph is not necessary. as long as the setup below (green line, custom points, area with background color) can be plotted.
I am using React Apexcharts to create a radial chart. By default, the progress bar goes in a clockwise direction but I need it to go counter-clockwise. Is there any option property available I can use?
What my graph looks like now:
What I need it to look like (bar going in opposite direction):
My options object:
let options = {
colors: ["#857EFF"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "70%",
background: "#293450"
},
track: {
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
opacity: 0.15,
}
},
dataLabels: {
name: {
offsetY: -10,
color: "#fff",
fontSize: "13px"
},
value: {
color: "#fff",
fontSize: "30px",
show: true
}
}
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
gradientToColors: ["#05E996"],
stops: [0, 100]
}
},
stroke: {
lineCap: "round"
},
labels: ["Progress"]
}
Any help is appreciated, thank you!
I've been looking for an answer for this Problem without any success. Today i've successfully created a workaround.
The Apex Radialbar just hardcoded always goes clockwise, no matter what you do because it is always going from startAngle to endAngle using +1.
So using startAngle -360 and endAngle 0 will have no effect.
Essentially, you want to create the Radialbar and mirror it on Y axis and then remirror everyhting you want to keep normal, back to normal. However you need to transform the components usually back in place.
You can also try only selecting the Radialbar and only rotating that, however i find getting the other components back in the correct place using "transformX" is usually easier.
so lets say you want a Bar from -360 to 90 but counter-clockwise,
create a Radialbar from 0 to 270 and then use the following CSS transforms.
Here is the example Radialbar from the Angular Documentation with a counter-clockwise bar.
TIPP:
Use exact classifiers and unique, here in ng-deep with
counter-clockwise svg
Because once you use ng-deep you cannot unset it, unless you modify the document directly, so when you switch views you might have unwanted sideeffects.
Mirrored
Original
Change startAngle and endAngle options
https://apexcharts.com/docs/options/plotoptions/radialbar/
plotOptions: {
radialBar: {
startAngle: -360,
endAngle: 0,
...
I'm looking to do this same thing and after reading apexcharts docs as well as experimenting around with it I don't think it's currently possible.
Not sure if it's a limitation or not but I can't make chart display all data (I have 1500 records). fitContent() or setVisibleRange() doesn't help.
Demo
var chart = LightweightCharts.createChart(document.body, {
width: 600,
height: 300,
rightPriceScale: {
scaleMargins: {
top: 0.1,
bottom: 0.1,
},
},
});
var areaSeries = chart.addAreaSeries({
topColor: 'rgba(76, 175, 80, 0.56)',
bottomColor: 'rgba(76, 175, 80, 0.04)',
lineColor: 'rgba(76, 175, 80, 1)',
lineWidth: 2,
title: 'AAPL',
});
areaSeries.setData([{
"time": 1629353327,
"value": 19.97
}, {
"time": 1629439727,
"value": 19.67
},
....
}]);
chart.timeScale().fitContent();
Is this expected? It'll work if chart width is set to 800px.
By default the min bar spacing value (the min space between bars) is 0.5, which allows you to show 2 values per 1 pixel. But if you want to show more data in a small viewport, you need to change this value to a smaller value, e.g. 0.001.
You can do that by modifying minBarSpacing option of timeScale - just add timeScale: { minBarSpacing: 0.001 } to your chart's options and it will work. Demo
Trying to get this grey line parallel to x-axis as a marker of target (at of y-axis 67%).
you may put a markers props like:
markers={[
{
axis: 'y',
value: 520,
legend: 'TEST',
lineStyle: {
stroke: 'red',
},
textStyle: {
fill: 'red',
},
},
]}
the value determine the marker location, you can calculate based on data you passed.