KyvisLabs ApexChart Module

Ignition
43

Love this module! So far pretty impressed with what can be done.

A major thing i was looking to Apex Charts for is the ability to have subplots, or multiple lines plotted with their own Y Axis separate from the others.
This seems to be similar to the Synchronized Charts, is this possible to use in the module?
I’ve tried creating two charts and linking them with the “group” property but that doesn’t seem to work.

EDIT 1: Looks like it does work, which is sweet. However i’d still prefer to have one chart component with multiple plots if that is possible

44

Hi Kevin

After updating to 1.0.8 if I put the chart inside the nested flex container it infinitely redraws.
When I install 1.0.6 again every thing works ok.

infinite refreshing

1 Like
45

Hi, is there a way to fully incorporate style classes into an Apex Chart?

Currently i am making do by setting some components to use css variables where i can, so that the color changes with themes.

Currently i have set my style.backgroundColor = --neutral-20, which sorts out that.

I’m currently struggling to get the axis title text color changed, there doesn’t seem to be a property for that?

Also struggling with the tooltip popup colors:
image

Edit 1: Found the variables i needed for axis tick labels: xaxis.axisTicks.color, and axis title coloring: xaxis.title.style.color

Edit 2: Managed to do an expression Map binding based on session theme to choose between “light” and “dark” for tooltip.theme which did the trick for the tooltip popup.
Doesn’t look too shabby now!

46

Is it possible to have Combo charts with this module?

Or is it possible to have multiple x-axis for a line chart?
I can see how to configure various y-axis, but i want to plot a date time x-axis overlapping an entirely different x-axis. Which would be a “numeric” type axis.

47

Hi guys, I’m playing with the charts and they are really amazing.

I’ve just created a brush chart in this way and it works good with the browser, I cannot understand how to manage the selection, in preview mode I can do it without problem but with the browser and even with the app I cannot manage the selection.

Annotation 2022-07-27 210643

48

I’ve another question for you guys, I realized that I was using module versione 1.00 so I updated to 1.09. When I did this the charts stop working (area and line chart with tag history binding) showing no data (the label values was NaN).

So I downgrade to 1.08, to 1.07 and in both cases they didn’t work, when I downgrade to 1.06 they start to work again in preview mode in perspective, but not neither the APP nor the browser show data in the chart.

In the end I downgrade to 1.00 and everything works properly… Any suggestion?

49

add your comments in GitHub page for that module … @Travis.Cox always work on it .

50

Thanks for the suggestion, I’ve just done it.

51

Hi guys, I have a couple of questions for you:

  1. How is possible to show only 2 data labels in a line/area chart (min and max)

  2. I have views with the chart in a flex container, when I open the view the Chart doesn’t grow as the flex container but I have to refresh it (changing for example the X axis range) so to grow it as the container

Thanks

52

How do you guys manage to minimize white space around the charts when embedding them into small views?
Especially the example first post, where a line chart is embedded into a table row?

I have turned off all the labels and such that i don’t want on the axis, but i always get a bloody vertical scrollbar showing up such as this:
image

I am using a Flex container, with the following settings:

image
image772×655 40.1 KB

The apex chart itself:
image

53

The easiest way is first overflow: hidden for your parent view.
Then try to play with padding and Margin : 0 for the chart.

2 Likes
54

How can we learn more about what is available when using the event handlers?
I would like to use the event: “dataPointSelection” to tell me what data element i’ve clicked.
How would that be possible?

For example, i’m currently working on a bar chart with 3 data series which are stacked on top of each other, and 2 data points (two bars).
Data points are represented as objects in the “series[0][data] array” so i’m wanting to get the correct index of the data array for the bar i click on.

55

Someone could help with this?

Point 1. is not so important, but point 2. is a real problem.

I don’t know if you have the same issue, but every time that I open a page I always have to refresh the chart so to make it grow in the flex container.

  1. How is possible to show only 2 data labels in a line/area chart (min and max)
  2. I have views with the chart in a flex container, when I open the view the Chart doesn’t grow as the flex container but I have to refresh it (changing for example the X axis range) so to grow it as the container

Thanks

56

I’m here to ask again your help, I’m trying to figure out how to work around the problem of the size of the chart that is not growing when I open the page, but I have to update the data to make it grow properly.

The Apex Chart is in a flex container and when I open the page here is what I see:
Cattura

Once I update the chart it’s shown correctly:
Cattura2

57

Thanks Richard for your help on this matter.

I have worked out how to do it the themes file so you won’t need to keep doing bindings on each instance of an apexchart.

custom theme file tooltip

custom theme result
custom theme result986×483 64.7 KB

custom theme code.txt (141 Bytes)

1 Like
58

Nice, be careful with editing themes files though, as they are overwritten by Ignition when they do updates…

59

Yes of course, I didn’t override ignitions. I import ignitions into my own and added those lines.

60

I’m trying to get a radialBar chart working, but any changes I’m making to the keys in props.options seemingly aren’t doing anything to the chart. (I’m pressing F5 to get the chart to update, as I noticed that it wouldn’t update with new config unless you did that)

Here’s my chart. For example, the options.total config isn’t doing anything; the total is not displayed even though options.total.show is true

I’m probably doing something dumb…

[
  {
    "type": "kyvislabs.display.apexchart",
    "version": 0,
    "props": {
      "type": "radialBar",
      "series": [
        13,
        1.5,
        25
      ],
      "options": {
        "value": {
          "fontSize": "10pt",
          "formatter": "function (val) { return (Math.round(val * 100) / 100).toFixed(2) + 'kW' }",
          "show": true
        },
        "total": {
          "show": true,
          "label": "Total"
        },
        "chart": {
          "type": "radialBar"
        },
        "dataLabels": {
          "name": {
            "fontSize": "25pt",
            "show": false
          },
          "formatter": "function (val) { return (Math.round(val * 100) / 100).toFixed(2) }",
          "show": false
        },
        "labels": [
          "Apparent Power",
          "Reactive Power",
          "Real Power"
        ]
      }
    },
    "meta": {
      "name": "apexchart"
    },
    "position": {
      "grow": 1,
      "basis": "200px"
    },
    "custom": {}
  }
]

PS. what I actually wanted to use was a stacked radialBar, but not sure if that’s possible with ApexCharts?

61

I think you’re looking for plotOptions. They’re defined here.

I’m not aware of a way to get the radialBar to stack, perhaps playing with the colors of the pie/donut chart to hide the remainder of the series? Do you have an example of what you’re wanting?

json options sample 
{
  "chart": {
    "type": "radialBar",
    "width": 380,
    "events": {
      "animationEnd": false,
      "beforeMount": false,
      "mounted": false,
      "updated": false,
      "mouseMove": false,
      "mouseLeave": false,
      "click": false,
      "legendClick": false,
      "markerClick": false,
      "selection": false,
      "dataPointSelection": false,
      "dataPointMouseEnter": false,
      "dataPointMouseLeave": false,
      "beforeZoom": false,
      "beforeResetZoom": false,
      "zoomed": false,
      "scrolled": false,
      "brushScrolled": false
    }
  },
  "labels": [
    "Team A",
    "Team B",
    "Team C",
    "Team D",
    "Team E"
  ],
  "responsive": [
    {
      "breakpoint": 480,
      "options": {
        "chart": {
          "width": 200
        },
        "legend": {
          "position": "bottom"
        }
      }
    }
  ],
  "plotOptions": {
    "radialBar": {
      "dataLabels": {
        "value": {
          "show": true,
          "color": "var(--neutral-90)",
          "formatter": "function (val) {return val + \u0027%\u0027}",
          "fontSize": "32px"
        },
        "show": true,
        "color": "#FFF",
        "name": {
          "show": true
        },
        "total": {
          "show": true,
          "fontSize": "40px",
          "color": "var(--qual-2)"
        }
      }
    }
  }
}
62

These are what I pasted into my ApexChart in Ignition into props.options but they don't seem to do anything :confused: if I add a bogus one into options though, the component goes blank, so obviously it's using them. I think once I get the params to work, the radialBar will work for me without it stacking, i did also look at the donut but I had the same issue with the options not doing anything