Did you get a chance to find a work around this issue? I have the same issue.
Hello @kyvislabs , I have look a lot of look and feel of different picture but I did not see anybody modified the look of legend. I want to change the shape and color of my legend to fit my style of line. Exemple I use rangeArea to show when my value is bellow of above the setpoint with color red and green. My target is a line with dash and my value is also a line but without dash.
On the legend am able to change the shape for all but not individual. I also see a problem that if am changing the transparency of my fill area its not working on the legend. Any solution?
If it can not be done am just make an other container for the legend.
Best reagards!
I always bind my data to the series prop.
Create an element for each row of the heatmap. Each element is an object that contains the "name":valueof the row and a data array that each element of that contains an "x":value for the column position and a "y":value for the datapoint. Here's an example:
{
"data": [
{
"x": 1,
"y": 0.936
},
{
"x": 2,
"y": 0.912
},
{
"x": 3,
"y": 0.948
},
{
"x": 4,
"y": 0.948
},
{
"x": 5,
"y": 1.002
}
],
"name": "A"
}, ...
shows up as:
I can see that you added "addPointAnnotation" a few versions ago, but the method "addYaxisAnnotation" doesn't seem to exist yet (same with "addXaxisAnnotation"). Any plans for this?
Is there any way to overlay charts instead of stacking them? I am trying to compare amounts of stuff between days, and I can only seem to find a stack option, no overlay for a bar chart. I want the current day data to lay on top of the previous day's data.
You just download the new version and install the module just like you did the first time and it will upgrade/update it.
You can always find the latest version from the Github repo most recent version is 1.0.19.
1 Like
Thank you that was it.
I am currently using the Apex Charts Components module version 1.0.19 and creating a stacked bar chart with a dynamic dataset. The chart has a series that contains 83 elements, each with 31 data points. I am experiencing significant rendering lag when the chart loads inside the designer, though it eventually displays. However, when loading the Perspective view in a browser, the chart begins to render but consistently crashes the tab with an 'Error code: Out of Memory' message.
Are there any recommendations to better handle this larger dataset during rendering to avoid the lag and/or the Out of Memory crash?
Someone else might have some ApexCharts advice, but this exact type of situation was the catalyst for my Chart.js component. Since it’s canvas based it can handle charts with a lot more complexity/datapoints.
5 Likes
did you ever get this figured out?
Hello.
I try to round the total value following the examples, but I can't do it. The labels.value.formatter property data doesn't respond to modifications.
{
"radialBar": {
"barLabels": {
"enabled": false,
"fontSize": "16px",
"fontWeight": 600,
"offsetX": "",
"offsetY": 0,
"useSeriesColors": true,
"formatter": "function (w) {return w.toFixed(1)+'%'}"
},
"dataLabels": {
"name": {},
"total": {
"fontSize": 26,
"label": "OEE",
"offsetY": 5,
"show": true,
"color": "#cbcbcb"
},
"value": {
"fontSize": 22,
"offsetY": 7,
"color": "#cbcbcb",
"formatter": "\"function(w) {return \u0027100%\u0027;}\""
}
},
"hollow": {
"background": "transparent",
"dropShadow": {},
"margin": "",
"size": 40
},
"track": {
"borderRadius": 10,
"endAngle": 0,
"show": false,
"startAngle": 0,
"strokeWidth": "120%"
}
}
}
here´s the solution
"plotOptions:{
"radialBar": {
"barLabels": {
"enabled": false,
"fontSize": "16px",
"fontWeight": 600,
"offsetX": "",
"offsetY": 0,
"useSeriesColors": true
},
"dataLabels": {
"name": {},
"total": {
"fontSize": 26,
"label": "OEE",
"offsetY": 5,
"show": true,
"color": "#cbcbcb",
"formatter": "function(w){return w.globals.seriesTotals[0].toFixed(1);}" //Solution
},
"value": {
"fontSize": 22,
"offsetY": 7,
"color": "#cbcbcb"
}
},
"hollow": {
"background": "transparent",
"dropShadow": {},
"margin": "",
"size": 40
},
"track": {
"borderRadius": 10,
"endAngle": 0,
"show": false,
"startAngle": 0,
"strokeWidth": "120%"
}
}
}"