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.
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
I am trying to create a flocked stacked bar chart like the one shown in image, please provide resources or code in sandbox for it
This site shows class components snippets to do what you are trying to achieve.
I'm using react-chartjs2 and chart.js to display datasets for a web application I'm building.
The user is going to have the option of selecting how many charts to view for different items. Each item will have its own chart, but fields/labels for the datasets will be the same for each item. This being the case I want for the user to be able to hide lines for different charts using one single legend. I don't want to display a legend for each chart that gets generated, just have one at the top.
I have a general idea on how to do this.
The issue is that each chart is its own React Component.
I'm trying to access all the other charts in one of the components and iterate through each instance of charts and modify the data that way. Any idea on how this can be done?
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.
Since I'm updating my application from Ext JS 4.2.1 to Ext JS 5.1, I took the chance to upgrade my old charts to the shiny new sencha charts. I've been trying to set up an interactable stacked bar chart that looks like this
Users should be able to click on the bars or on the labels on the left to check out the details.
I've managed to capture mouse events on the chart bars (using the chartitemevents plugin), but I'm stuck trying to capture click events on the labels.
I've tried using the spriteevents plugin on the chart, but on 5.1 it simply doesn't work, and it's broken on the 5.1.1 nightly builds (you always get the background sprite no matter what). Even if it did work, getting the correct sprite would only get me halfway there as I would have no clue about which series does that label belong to.
Here's a fiddle with an example of the situation: https://fiddle.sencha.com/#fiddle/hjm
Does anyone know of a way to do this?
As and added bonus, it would be great if it was possible to capture onmouseover and onmouseout events too, so I could change the cursor to pointer whenever a label is hovered.
i just created a plugin for axis click: Sencha Forums
Ask me anything if the plugin usage is not clear.