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.
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
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.
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
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.
Awesome! Thanks so much for taking the time to provide some feedback on this topic for future readers. Really appreciate it
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:
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
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!
Yes, it works with line chart. Thanks @Joyce
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.