[Plugin update 2023] ChartJS - Charts and Graphs (TechBlocks)

thank you

Hello @aestela ,

You can achieve this by adding the series via workflow action (where you can customize the color of each bar in a single series–so you’d conditionally change the color of the value is less than 0)

1 Like

Wondering if possible to create a chart like this. Looking through the chart type dropdown options and don’t see this option.

Working on a chart to replace a waterfall chart that is in the specs. It needs to allow for both positive and negative values.

Edit: I have a bar chart that is working for this. However, it colors the negative values the same as the positive. I can’t figure out how to implement color coding. I tried using a workflow with conditional statements. However, it just keeps writing over the first entry in the series.

In this example, I am trying to figure out how to have the second item on x axis show as a red bar:
Screenshot 2023-05-11 at 1.53.32 PM

1 Like

Could you provide an example of how to do this?

Hello @cartuni2023 , - There is no option for displaying only the total of each stacked bar. Though you can display the value of each series in a stacked bar. As an alternative you can use the text element to display the total value of each stacked bar outside the graph.

  1. At the point settings change the value of Connect points? To “yes”

MicrosoftTeams-image (45)

  1. You can make an alternative to that; you can put a label outside the graph using the text element.

Hello @mc3digital, We will look into it and get back to you once we have the proposed solution for this.

1 Like

Thank you. This project has a designated report designer and they are specific about certain layouts. Hope my requests aren’t too tricky as I try to match the fidelity of the designs I am given. From what I have seen, this is going to be one of the most complex reporting apps developed on Bubble.

In regards to that, I am working with a bubble chart and am curious about a setting and how it is applied. The Max X/Y Ticks values - when I adjust them it doesn’t seem to do anything. Trying to have a box with a 3x3 grid (tic tac toe board layout would be an example of this structure). Is there a way to set it to a specific value? Tried setting the max values to 3, 4 & 5 and it seems to be choosing a 2x2 grid for some reason no matter what I input there.

The bubble chart could use a padding setting (see top right of screenshot). The bubbles at edge are getting clipped the way we are calculating them will likely always be falling off. I saw this setting on other charts, so I am hoping this can be brought in…

Hi!! @help6 is there a way to get piechart percentages on data labels, when passing absolute values? Evidently, the plugin is already calculating the data set proportions, but the data labels only show the absolute data number and there is no way to enable showing percentages.

This would be super helpful to avoid going through calculations every time the chart is updated or a series is hidden.

It’s not possible, when adding a series via a WF, you can set the color for ALL the data set, but not one color for negative values and another for positive values… hopefully this can be addressed at some point.

Yes, I was wondering about this. I had two sample data points I was adding via WF. The negative value was showing up as green not red and I couldn’t figure out why.

It wasn’t going to work either as they add a series not individual bars which I needed. I have 3 color codes I need to apply in order to mimic a waterfall chart. There are positive, negative values then a sum of the variance at the end, which was a separate (third) color. Thus I wanted to add bars which logic attached to each one.

Hi there!

I am having issues with connecting the chart.js plugin to my database and I do not know if it is because the functions I am using, the database structure or both.

Basically I have the data in the database by day since it is water consumption data. I need the user to be able to filter the data by day, month or year depending on their needs. For example, imagine that they need to see the comparison between the year 2022 and 2021 month by month or that they prefer to see the consumption between march 1st and march 4th 2023 day by day or by year.

I can’t even make it appear in the preview and I don’t even know what functions to use… Does anyone know what to do here?

I leave you pic of my database and the functions used.

Thank you!


hi @riverogonzalez.isaac I think the best graph to use is stacked bar and the line chart.
you can use the date/time picker element for displaying data from date x to date y
for the month and year you can use the dropdown element
MicrosoftTeams-image (75)

@help6
I have some additional feedback on this that may help sort things out.

  1. I was able to override the default font by switching it away from App Font (Lato) to Lato.
    It appears the plugin doesn’t recognize / inherit the app font setting on bar charts and mixed bar/line charts.

  2. After overriding, it seems to react to the font size but not bold or font weight. No changes there render changes in the charts.

Hope that helps.

2 Likes

@help6 Thank you very much!

I finally decided to have th chart for the whole year but as the data is take day by day, I want to be able to choose the days that I want to visualize. Fo example, Imagine that I want to see the consumption from 01/01/2021 until 01/10/2021 day by day. For that I chose to use the date picker. However I have no idea about how to connect the date picker to my chart…

Could you please help me?

Hi @aestela , there is no option to turn the absolute value into percentage however you can turn that absolute value into a percentage by calculating the percentage of each value from the total.

1 Like

Hum… that’s precisely what I wanted to avoid, since I would need to calculate the % on every data update + every chart interaction.

I’ll look into other options.

Thank you.

Thanks for the feature request @aestela. Let me see what we can do to make that use case work. Will get back to you tomorrow!

1 Like

Hey @aestela, we just pushed an update in v4.39.1 that enables you to customize the Pie Chart data labels and include percentages in the label. Please take a look!

Does this address your use case?

@aestela we’ve also added a demo on www.techblocksco.bubbleapps.io/bar-charts for conditional colors based on value (eg red if negative and green if positive). Please check that one out as well!

1 Like

Hey @alex4 thank you so much for this update! Everything is working as expected!

Just a “nice to have” request for the pie chart, I don’t if its viable to recalculate the percentage if a data set is hidden by clicking the leyend, and set same labelPercent, labelValue, labelName for the tooltip.

As for now it’s working fantastic! Once again, thanks for your great support.

3 Likes