[New Plugin] Simple Charts

Hi @se.belobrov – hmm… I’m not able to reproduce the issues you’re reporting. Please share with me a link to the editor/run mode so I can take a look. Feel free to DM it to me.

Thanks!
Alex

Hi @alex4,

I’ve subscribed your chart and start playing with it. It’s user friendlier than other plug in but I’m still having some difficulties.

What I want to achieve is a super simple horizontal bar chart. It has just one series, no labels, no legend, no gridlines needed. I can’t get it right as following:

  1. How to control the thickness of the bar?
  2. It seems like there’s a left offset which I can’t control. How to start the chart from the very left end?
  3. I want to remove mouse over tooltip
  4. For Horizontal Chart, the labeling for X and Y Axis should be swapped? Is it correct that “Y Axis - Max value” = the max value for X existing. “Series 1 - Y-values” = current value?
  5. I do like the animation effect that draws the charts when loading. How to activate it?

Look forward to hearing from you!

Thanks!
Ohyoon

Hi Ohyoon, thanks for reaching out!

  1. You can control the thickness of the bar under the “Bar Chart Settings” section in the Element editor. There is a property called “Bar Width (Bar)”
  2. There is some padding on the sides of the chart, I can add it to my backlog to enable users to customize the padding, but for now, you can place the chart at an X location of negative 5 pixels or whatever number you need
  3. You can just enter “N/A” in the custom tooltip HTML ID area. Thanks for the input, I’ll add a feature to make it more clear.
  4. Yes, the X and Y axis labeling should be swapped. Unfortunately, there is no easy way to make this more from the plugin engine.
  5. Animations are possible when you add the chart series dynamically. See the “When page is loaded” actions in this editor example here.

Thanks for the input and feedback. Helps highlight where I will update documentation and improve the usability of the plugin!

Alex
TechBlocks

Thanks for the quick reply Alex! It’s very helpful.

Regarding the thickness, I’m using “1” value, but I still can’t control exact thickness of bar chart in px? Is it possible ?

Related question is how to apply color to “negative space” the area from end of chart till the 100% value. If I can control the thickness I could place a shape. If the settings offer such parameter it will be even better.

Hi @ohyoonkwn – for now there the way to control the thickness of the bar will be by proportion. Chart.JS doesn’t expose the ability to update the bar thickness by pixel number but I can look into what it would take to build something custom.

I’m not sure I fully understand the negative space question – is this for 100% stacked bar charts?

Alex

Hi all, just added the ability to sync crosshairs on Scatter/Connected Scatter Charts – here’s a screenshot of the functionality:

You’ll see a new property on the Scatter/Connected Scatter element called “Sync Crosshairs?” as well as an identifier group to identify which charts you’d like to sync together. For instance, if you want to sync Scatter A with Scatter B and separately sync Scatter C and Scatter D, you would give A and B a group number (like “1”) and C and D a different group number (like “2”)

Enjoy!
Alex

1 Like

Alex, it does tho!

Only chiming in as I am becoming fairly familiar with the chartJS library for my own use case

@jared.gibb you’re right, I had missed that. Thanks for letting me know!

@ohyoonkwn – I’ll look into adding that property this week.

Keep you all posted on when it’s ready
Alex

1 Like

Hey @jared.gibb and @ohyoonkwn

You can now set your Bar Chart’s bar width by pixels (this overrides the percentage input for the bar width).

Please upgrade the plugin to v2.40.0 (or greater) / refresh the page and you’ll see the new input on the Bar Chart element.

Let me know if you have any questions or feedback!
Alex

1 Like

Hi all, new plugin updates for v2.40.1

I’ve added a new feature for Bar/Line Charts to allow users to customize the amount of padding (in pixels) between the Chart and the element borders. You’ll see it in the “General Properties” section of the Bar/Line Charts.

CC: @ohyoonkwn who requested this feature.

Let me know if you have any questions or comments!

Best,
Alex

1 Like

Hi Guys, sry for this beginner question but I really don’t get the on hover labels active on the pie chart… I also copied it from the example page from Alex but these tooltips I think their called won’t show on hover.

Hi @l999f – thanks for reaching out!

In order to get the custom tooltips working, you can create a group on your page (or copy the tooltip group from my demo page, there is one called “Group Tooltip Site Visits By Device (Pie Chart)”), enter an HTML attribute id for that group, and put that HTML id in the custom tooltip property on the pie chart you’re working on. Then, inside of the group, you can refer to the hovered values and display whichever ones are relevant to your project.

Happy to take a look at your editor if you need assistance; feel free to DM me a link to it.

Best,
Alex
TechBlocks

@alex4

Thanks for the update! Excited to try the new feature.

I have trouble loading the data in the workflow. I tried to load data when the page is loading. However the object name is not shown up to be selected. I deleted the object and add a new one but the same problem persists…

Do you know how it can be fixed?

Screen Shot 2021-03-04 at 19.39.30

I’m not sure how to use the updated version. I’m using a horizontal 100% stack bar chart.

Should I use px or %? Screen Shot 2021-03-04 at 20.02.08

Hi @ohyoonkwn – to clarify, are you unable to find you element in the element dropdown for a workflow action? If so, try refreshing your page. If that doesn’t work, I’d reach out to the Bubble team as this seems like it’s a Bubble engine bug.

For the bar width issues, have you already updated the plugin to the latest version and refreshed the page? You’ll need to do so before you can access a new property which is the Bar Width by pixel (it should appear below Category Width).

Let me know if you’d like me to take a look (you can DM me a link to your Bubble editor)

Hi all, a bit of a delayed message about an update I pushed last week in v2.39.0:

Previously, you only had custom tooltips for Bar/Line Charts. I’ve added custom tooltips for Radar Charts, Scatter Charts, and Bubble Charts as well!

Let me know if you have any questions/feedback
Alex
TechBlocks

1 Like

Hi Alex,

Really love your work and thanks for the frequent updates. This plugin has been a crucial part of my project and I am having very positive feedback from my users about the charts.

I just wonder how I can make some changes as below to meet my users’ needs:

#1. Cutting a line of line charts when a value is empty: I’m adding Y axis values to my line chart by doing a search of things, which returns a list including some empty values. Currently, the line appears at 0(zero) position of Y axis with empty data label (like example below) but I want to cut the line without showing data label where the value is empty and resume the line from where the value exists.

Example
image
image

#2 . Setting minimum Y axis dynamically for line charts: Let’s say I have this list of values to be added in Y axis and the list contains some negative values. The problem is, I don’t know the lowest value in the list until I do a search for things. It causes me to set a minimum Y axis to some random negative amount (i.e. -50) and when the actual lowest value is lower than the amount (i.e. -100), the line go underneath the minimum Y axis and disappears. Is there any way to make sure the line is always above the min Y axis by setting it dynamically?

Example
image

#3. Lastly, are you planning to enable “double Y axis” for line charts :slight_smile: ?

Thank you,
Keummo

Hi @kang.keum.mo thanks for reaching out!

  1. To clarify, your search for series Y values for your Line Chart is returning some empty values, and you’d like the Line Chart to “skip” those values, is that correct? In your example (“I want to cut a line like this…”), would it be OK if the line connected between 184.0 and 205.1 (just ignoring a point at 2017)?

  2. If you make the minimum Y value empty, the plugin should calculate the min Y value itself so that all the points show up on the graph. Let me know how that works out.

  3. I “double Y axes” on my backlog, will DM you about this one.

Best,
Alex

Hey @alex4, thanks for the quick response :slight_smile:

  1. That’s right. But, I want to make it disconnected as seen in one of my example (“I want to cut a line like this…”). It’s quite weird because, for this particular example, actually there’s a value which is not empty but the line gets disconnected. Maybe I should DM you with more details on this particular case separately.

  2. I can’t make it empty as it keeps being set back to zero. I’ve recorded a gif as below to show how it behaves from my side so please take a look and let me know if I am missing something here.
    Screen-Recording-2021-03-08-at-1

  3. Glad to hear and got your DM on that. Let me think about it little bit more and revert back to you :slight_smile:

It would be awesome to be able to use custom icons for data points especially on line and area charts.

It would also be great if the app user could drag the datapoints on a line chart and be able to pass the user selected values back to bubble for actions or workflows.