Chart.js Bar Chart coloring Technique - chart.js

Hi Everyone i just want to ask question about bar chart in this application http://www.chartjs.org/
is it possible to create a bar with 2 colors?
for example i have a target 1000 and reach 500
so the full length of bar is color blue(target) then the 50% length of the bar is color red(reach)?
sorry for my question if it is confusing thanks

I think that a posible solution could be use some kind of Stacked Bar.
But chart.js doesn't support that out of the box, It looks like that you need the a fork of chart.js called chartnew.js that allow stacked bar which could give you this two colors in the same bar and many other options. Take a look at the github page of the project
https://github.com/FVANCOP/ChartNew.js/
I hope it helps

Related

Apexcharts: Are "grouped" pie charts possible?

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.

Sort Bars in stacked bar charts Superset

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.

Vertically stacked Google Bar Charts

I'm trying to produce a vertically stacked bar chart using the Google Charts API and I thought I had found the solution when I found the option:
isStacked: true
However, This seems to add the stacking horizontally (see link below) and I cant seem to find a way to do it. Anyone come across this before or can help me?
See: http://jsfiddle.net/tmA55/1/
Thanks
Do you mean a vertically stacked ColumnChart?
Just change the chart from BarChart to ColumnChart:
new google.visualization.ColumnChart(document.getElementById('chart'))
http://jsfiddle.net/asgallant/tmA55/2/

Chart templates, color schemes and font sizes

I'm trying to automate some PowerPoint charts, but I'm having problems preserving some formatting.
When I add a chart using a chart template, the chart doesn't use the slides color scheme, but rather the colors it was saved with. It doesn't help to change the color scheme for the slide - the chart isn't updated. To make the chart update to the color scheme of the slide, I have to clear formatting for the chart. The problem with doing this is that all font sizes are automatically set to 18pt. I cannot find any easy way restore the font sizes for the chart without saving all sizes before calling clear, and set them back after clearing.
Have you looked into using the Format Painter function it may or may not work depending on a variety of factors from my quick look on the net (google it for lots of articles).
Also if you've done one chart you should be able to copy the formatting from one chart to another using the paste special option as mentioned here http://www.pcreview.co.uk/forums/there-format-painter-equivalent-use-many-charts-t3611646.html .

how to add label/text to each coloumn in Google Chart

I am using ColumnChart to draw a chart and I need to have text on each coloumn (at the top of it)
I can't find any documentation about this, I was wondering if someone can help please?
Something similar to this:
(source: seo-website-designer.com)
This is currently not possible with the new Google Charts, the nearest you can get is to have a tooltip but those can only be triggered on hover at the moment.