How to build a combo bar/line chart

I’m having some trouble creating a combo bar/line chart. Per the linked sample, I believe I just need to add 2 datasets to the datasets formula. I’m able to get 2 datasets created as 2 bars (see attached Figure1.png) but as soon as I change the second dataset to type:line the chart breaks (see attached Figure2p.png). Am I doing something wrong, is this a limitation, or is this a bug?

For added context, I am trying to create a bar chart that illustrates current data point compared to a goal data point. Picture those fund raising scales where your goal might be $1,000 and current fundraising is at $750. The bar would be $750 here, the line would be $1,000, and the bar would be able to exceed the $1,000 goal. I imagine it would be easy to do with the ChartJS annotation plugin, but I’m not fluent enough to register and install that plugin.

Figure 1

Figure 2

Hi @archenia_jsanchez :wave:

2 questions:

1- Have you tried testing your two data sets in the Charts.js docs directly?

This can help a lot because once you know what Charts.js expects to display the data in a way you want, it’s easier to write the correct formula in WeWeb.

2- Could you “unfold” the objects in the Current value of your Labels, Datassets, and Options in WeWeb?

This will help us see what data is being passed to the Charts.js plugin and help you identify where things might be going wrong.

Hi Joyce. My apologies for not getting back to you sooner. So, the above solution was a alternative solution to something that I have since explored ChartJS Annotation plugin to solve (see my post here for more on that). I don’t have the work to go back to and reference to answer your questions, but I can try to answer from memory.

  1. I had not tried testing the 2 datasets in ChartJS directly; it wasn’t until after that I really started building my charts in VS Code first and then importing them in

  2. This is where my memory will mostly fail me. Labels was likely an empty array given I didn’t want axis labels or a legend to appear. Figure 2 above shows what was in Datasets and as for Options thats the one that is probably lost.

We probably don’t need to resolve this one, given I found a workaround with the Annotations plugin, but I wanted to close the loop and provide some insight for future community members.

1 Like

Awesome! Thanks so much for taking the time to provide some feedback on this topic for future readers. Really appreciate it :pray:

Hi !
Any idea on how to di that ?
The chartjs component works well in advanced mode if I configure all the dataset data without specifying the “type”. It then displays 2 datasets in “bar” mode. But if I specify the chart type, it doesn’t display anything.

If I do the same thing on the chartjs doc, it works:

Hi @Geoffroy :wave:

For some reason, it seems that:

  • when you use the bar chart UI element in WeWeb in combination with a type: "line" chart in the dataset it doesn’t work BUT…
  • when you use the line chart UI element in combination with a type: "bar" it does :point_down:

Not sure if it’s intended or not. I’ll create an internal bug ticket so the team can investigate.

In the meantime, I think you’ll be able to build your chart if you try the same thing with a Chart - Line UI element in WeWeb and add the type: "bar" to your first dataset (instead of type: "line" to your second dataset).

Let me know if not!

1 Like

Yes, it works with line chart. Thanks @Joyce

1 Like

Hey everyone. I was about to create a seprate post but found this post already existed. To be clear:

If you want to create a combination chart in WeWeb then you HAVE to use the line chart and add bars, not the other way around or the chart will break (and become unrecoverable).

I think it’s important to make clear because like most, by default, I was selected the bar chart and trying to add a line object, which does not work.