This is my first time using Chart.js and I want to create bar chart with multiple series. Based on documentation we have to specify fillColor for each dataset.
Is that possible to create multiple chart without set fillColor (like barchart in excel).
fillColor uses rgba. a = alpha. you can set alpha value to 0. such as
fillColor: "rgba(220,220,220,0)"
this should give it a transparent fill color and still display the border colors assuming you have them not transparent.
I know its very late, but we can achieve empty bar chart with only the border visible by setting the property : fill:false
Hope it helps someone :)
Related
I created a table showing on it two types of data from the same sites.
Each pair is show in same color but different light ratio (e.g. dark blue and light blue).
When I print them using "spline", there are two lines which look pretty but if I change the chart type to "bar" it adds a purple border to them which I want to avoid.
This is how my chart looks like with spline:
And this is with bar:
Do you have any ideas about how to remove that border on the second chart?
Try set below css. It will remove the border of the bar shape.
path.bb-bar {
stroke-width: 0;
}
We are using this chart. I see there is no property available to customize the colors of the pie chart.
Is there a way to customize the colors ?
Also how can we enable legend for this (if we could display legend in the bottom of the graph, it could be great. i.e like this )? and display only percentage on the graph?
To make the graph exploded, i see we need to use ["pulled": true] in the dataProvider. Instead of providing it inside the dataProvider, is there a way to provide somewhere outside ?
There are two ways to customize colors
1) Use the colorField and define the colors directly for individual slices.
2) Set your own theme by modifying the colors array or create your own theme.
Legends are enabled by setting an empty legend object in the chart config. You can find further configuration properties in the documentation. You can even change the value label to use percentages by modifying the valueText property. There's also an example of a pie chart with the legend set up and a completely custom legend.
If you want to change the pie slices labels, change the labelText.
As for your last question, no - it's using pulledField to specify which slices are pulled out in your data. There isn't a setting to explode the entire chart without it.
I have a column chart that uses a gradient color and looks like this :
however I'd like to make certain parts grey, like that:
What would be the best course of action in this case? Should I split the data in different series or .. ? Thank you!
You can update point's color on load event.
point.update({
color: '#4d4d4d'
});
API Reference:
http://api.highcharts.com/highcharts/chart.events.load
http://api.highcharts.com/highcharts/Point.update
Example:
http://jsfiddle.net/j7j1j28v/
I'm using highcharts and I know that the yAxis labels are automatically generated.
The thing is I've got this 3D graph in which apart from the data, there's a fixed 'goal' line on which we compare which data set is over or under it.
Since 3D graphs don't render lines very well, I used a plotLine and it works marvelous. The problem comes when I try to show how much this 'goal' is, because even though it's at the right position, it would be nice to display this goal amount.
What I want to do is display at the left of the graph the value of this line, so that whoever sees it is able to know how much the goal is for that particular data set.
Here's a screenshot of the graph, and circled the place I want to add the custom label:
Graph screenshot
Inside the red circle is where I want to add this custom string (which should be a percentage number).
I appreciate any help you guys can provide. Thanks!
You should be able to use renderer.text for adding custom text in your chart.
http://api.highcharts.com/highcharts/Renderer.text
load: function() {
var chart = this,
yAxis = chart.yAxis[0],
plotLine = yAxis.plotLinesAndBands[0],
pLPath = plotLine.svgElem.d;
chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({
fill: 'red'
}).add();
},
In the code above I am using plotLine's path.
Live example how your chart may work:
http://jsfiddle.net/0hyaevax/2/
I'm using dc.js which sits on top of D3. Problem is all my charts have the same color bars like:
Its not easy to set the domain for different colors because none of my charts are static and the values on x/y axis could always be different. How could I just tell the chart to dynamically change the colors for each group? The example above code looks like:
var chart = dc.barChart(elm);
chart.barPadding(0.1)
chart.outerPadding(0.05)
chart.brushOn(false)
chart.x(d3.scale.ordinal());
chart.xUnits(dc.units.ordinal);
chart.elasticY(true);
chart.width(250).height(250)
chart.render();
I've tried adding something like:
chart.range(colorbrewer.RdBu[9]);
but then all the charts turn the same color too.
Thanks!
I believe you want something like:
chart.colors(d3.scale.category20b());
to assign a color to each bar. If you want the color that's selected to be based of the value of the bar's data:
chart.colorAccessor(function(d, i){return i;})
These methods and more are documented here: https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#color-mixin