I know there is way to to overlay 2 graph together (explained in this post: Overlay Line on chart.js Graph)
The Overlay of Chart.js method doesn't seem to be supported in the angular-chart.js library.
Is there any way to add this feature to the library without modifying the actual angular-chart.js file?
You can add custom types as per the stacked bar chart example, however the Overlay chart seems to be via a fork of Chart.js itself so not sure how that would work.
Related
I'm using cypress.io to test my react web app. The app contains some chart.js charts. I'm able to identify the bar chart after setting an id.
<Bar id="goodBadBar" options={optionsBar} data={barData}/>
Now I want to verify that the chart has two bars. How do I "find" that there are two bars?
This is my current code:
cy.visit("http://localhost:3000/totals");
// The chart should be visible
cy.get("#goodBadBar").should("be.visible").should("have.length", 2);
});
You can't select it with cypress, since it is drawn on the canvas and does not contain dom elements what cypress looks for. So you need to use an image based test for this. It can be done with the snapshot plugin or any other image based framework.
Although you should not need to test third party libraries. The testing that it shows as it needs to show is done in the lib itself so as long as you supply the correct config it will render correctly
Following the react-chartjs-2 documentation and setting up a Pie chart on codesandbox gets everything working, except the options don't work.
When you set up react-chartjs-2 with import { Pie } from "react-chartjs-2";, codesandbox will automatically save the latest stable release of react-chartjs-2 and chart.js as dependencies. This unfortunately breaks things. You need to change the versions in this panel on the left hand side of your codesandbox panels.
I've made a demo, which can be forked to keep all of the dependencies. It also demos a few options that can be adjusted on the chart.
I want to create some animation rich charts in a dashboard, I have attached some images on how I want,
Where onclick of pie chart section, that section gets separated, and with loader animation, like its loading pie chart.
Some beautiful barchart with loader animation and such.
Before I used react-chartjs-2 library and I was able to build basic dashboard, but I was very static and I was unable add animations as such. If anyone could suggest me some libraries, that is rich in animation or some sample dashboard that includes these features.
Check out Victory Charts (https://formidable.com/open-source/victory/), I've used them in the past for react native projects and loved the API, but it's really a web charts library (the mobile version has performance issues).
I need to have two MultiBar charts simultaneously in MultiChart using Angular nvd3. MultiChart works fine for bar, line and area charts or combination of any of these 3. But when I am trying to have multiple MultiBar charts inside the chart window I am getting errors. Please have a look at the link. This is exactly what I want to build. I shall be happy if anyone can help.
I have searched many docs in google but didn't find anything about creating bar chart and graph chart in one image by using JFreeChart. Does anybody know it?
OverlaidBarChartDemo is one such example, but you should also browse the JFreeChart Demo.