google-chart | Google Charts API web components | Web Framework library

I would like a dashboard with a pie chart like this example but keep the colors consistent. E.g. in the example, the color of Margreth changes from pink to orange if you set the filter from None to Female.

The { role: 'style' } option is unfortunately not available for pie charts. Instead, a list of colors has to be provided in the options. When using the filter, the first available colors from the list are used. So unlike this (unfortenately) accepted answer, it does not help to provide a list of colors with a size equal to the total unfiltered dataset.

Instead, I think a function needs to be defined to dynamically create a list of colors that aligns with the filtered data, like:

I am trying to build the below bar chart.

My data are in the format :

[ month , region , totalSalesForCompanyA, totalSalesForCompanyB ]

I can successfully build the below charts :

• a bar chart for dual-Y where on the X-axis I have months, and then each Y dimension is the sum for each company.
• a stacked bar chart for the above, where I do have 1 Y-axis dimensions, for each company

What I want is to combine the above and include region. So end goal is to have :

• on my X axis : the month timeline
• 2 Y-axis dimensions : sum for company A and company B respectively
• and each of those sums to be stacked based on region.

Is that possible using react-google-charts? I am reading on ComboChart but I am not sure if that's the one I need. Using Bar Chart it doesn't look like that's possible.

Apologies for the no code post - will add code samples if ComboChart is indeed the one to go for. Thanks!

EDIT : I found that react-vis has something as per : uber.github.io/react-vis/examples/showcases/plots -> Clustered Stacked Vertical Bar Series - was wondering if google charts have something similar

EDIT 2 :

I am looking for something like this :

So having a dimension on X axis - Quarters. Then have 2 Y-columns - each of which is stacked. Those 2 Y-columns are presented side by side.

I would like to create a barChart using Vue-Google-charts where values are displayed on bars. If I read the google charts documentation, I should use annotations.

How do I put annotations in Vue-Google-Chart component code ?

Here is my current component code:

I have one Array that consist of one Key called Status it has two value 1 is good and other is bad i am using react-google-charts i upload my code below kindly check and help me

JSON:

I have a stacked chart which is responsive for most screen sizes based on the solution for responsiveness provided here: Google Charts - Responsive Issue - Dynamically Resize

The problem is that despite none of the data values being higher than 5000, when viewed on mobile the scale goes up to 10,000 and the entire chart is rendered illegible. How can i scale the chart correctly for mobile?

JSFIDDLE https://jsfiddle.net/385rzhsg

HTML

Im using npm version 6.17.1

I have React 15.4.0 installed

I try and install npm install pretty-checkbox which gives me

I'm using the vue-google-charts package (https://www.npmjs.com/package/vue-google-charts) to display google charts in my application (vuejs2.x) and until now it worked perfectly fine.

But now i get the following error:

...

I followed this guide to set up swiper slider in my Angular 8 application.

I get the below error when importing NgxUsefulSwiperModule into app.module.ts

ERROR in ./node_modules/ngx-useful-swiper/fesm2015/ngx-useful-swiper.js Module not found: Error: Can't resolve 'swiper/bundle' in 'C:\Users\Dan\NewAngular\node_modules\ngx-useful-swiper\fesm2015'

I tried deleting the node_modules folder and reinstalling everything but it fails every time.

Can someone please tell me what I'm doing wrong?

This is my package.json file

I have created stack column chart with filter when i click stack column.

But when i click selected, colour is change to default colour (blue)

Here my vue app

https://codesandbox.io/s/vue-dashboard-chart-6lvx4?file=/src/components/Dashboard.vue

I've expected colour selected same of colour in stack column.

How is it done using Vue-google-charts?

Thanks an best regards, Dede