I want to have a bar chart, where some rows may have multiple distinct disconnected bars. Is it possible to use Chart.js to achieve something like this? If not, is there another chart package to achieve this in Vue?
Related
I would like to create a pie or donut chart where the individual areas can be grouped. Here is a simple picture to illustrate:
With Chart.js this is definitely possible, but with Apexcharts I didn't find a corresponding demo and also no comparable function in the documentation.
So my question is if my intention is at all possible with Apexchart and if so, how?
Thank you.
I am creating a bar chart on Apache Superset which shows count of something from across the world breakdown by platform. My chart looks like this
I want to change the order of appearance of breakdown values, WIN should be at the bottom.
You can change the order of your metrics to match the order you want.
I have a map (K, V) of dates and values that I'd like to display in a bar chart using chart.js. Date being on the x-axis and the count/number on the y-axis. The dates are sporatic so I want to hide all of the dates that don't have values (i.e. count = 0). In other words, I only care about showing dates that have data.
I'm kind of new to chart.js so I've tried messing with some of the scales chart options but not finding great api documentation of what all of the options are to configure.
You may try to filter your data before passing it into chart.js with function filter.
I am using PowerBi February release.
I am trying to create custom theme (.json file). I want to have different data colors for different charts and not the global/common data colors for all charts.
Suppose for line chart colors are "red,green,blue" then for pie chart colors are different, lets say "yellow,grey,purple".
Can you please suggest how to create a theme based on above requirement.
Thanks in advance
Currently, this is not possible to create a custom theme that pre-assigns each color to a bar or piece of a pie chart. You can for KPI and some of the other visuals, but not pie or bar (aka stacked column chart)
The current workaround is very easy though. Follow these steps:
1) As suggested by this blog, create a custom theme with your desired colors. Using this online tool, I was able to make a minimum theme file from your requirements:
{
"name":"MyTheme1",
"dataColors":["#ff5624", "#21ff13", "#0009db", "#fff780", "#d3d3d3", "#7d00b6"]
}
2) Save this as yourtheme.json and import the file in the Ribbon using Themes->Switch Theme->Import Theme
3) Then you would need to go to the bar chart and pie visual and assign the colors individually:
For the Pie Chart - click the paint roller found in the visualizations pane and expand Data Colors. Then assign the color to the values for each pie piece. (see image for the colors from your theme.)
For bar chart (aka stacked column chart) click the paint roller found in the visualizations pane and expand Data Colors. Then set the Show All setting to On. Then assign the color to the values for each bar.
The image below is a power bi report with bar and pie charts colored with the colors from your imported theme file.
Other than using the Column chart and naming appropriately is it possible to create histograms in google chart api?
To add to mattedgod's answer,
The column chart can now be created with the bars spaced tightly together, use the option:
bar: {groupWidth:"100%"};
Google introduced a couple of days ago an histogram chart : link
Google Charts does not have a histogram chart, since it is just a visualization library you will have to modify the Column Chart to suit your needs. However, I suspect the reason you are not satisfied with column chart is because of the column spacing, which doesn't look very histogram-like. So I will answer this question first:
Can you control the spacing between columns in a Column Chart?
No, not at this time. See this quote from the Google Charts Community
There's no support in the API for controlling the spacing between bars. You might be able to hack it if you're willing to dig into the chart's SVG.
So it is do-able but will take some extra work from you. You can also play around with the chartArea configuration option which will have some influence on the column spacing.
However, the original question may have a different answer actually.
Can you create a histogram-like chart using a Column Chart?
While you cannot control the spacing between sets of columns in a Column Chart, you can get the columns pressed up almost to one another by specifying them as different columns, and then setting each column's color to the same color in the configuration options.
Here is a simple 3-column histogram:
var data = google.visualization.arrayToDataTable([
['x', '1-10', '11-20', '21-30'],
['', 3, 5, 4]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"My Histogram",
width:600, height:400,
hAxis: {title: null},
colors: ['red','red','red'],
legend: {position: 'none'}
}
);
Notice you have 1 row with 3 columns that are each colored 'red'. The downside to this is that you lose out on the labels along the x-axis telling you which column represents what. Again, you will have to have some sort of logic to construct this histogram and populate the data the way you want as well.
So the long story short is Google Charts doesn't have a Histogram and while it is possible with a Column Chart, you might consider looking into a different library.