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.
Related
to visualize data I am using a heatmap from the plotly.js library. After rendering the heatmap I want to be able to dynamically change the axis limits. So far I manage to do that for the z-axis (color) but not for the x- or y-axes.
Here is what I try:
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
data[0].zmin=0;
data[0].zmax=10;
Plotly.redraw('myDiv');
Sadly only the z-axis works. You can check an example here: https://codepen.io/brockerdocker/pen/QWgvLGx
Here is what I get (only z-limits changed):
And here is what I would like to get (also x- and y- limts changed):
However this 2nd heatmap I can only achieve if I specify x- and y-ranges before I call Plotly.newPlot('myDiv', data, layout);. Once I generated the heatmap it seems that I can't change the ranges anymore.
So any idea how I could still change the ranges after having generated the heatmap would be great.
I just found the solution:
In order to being able to set a dedicated range for the x- and y-axes one first has to set 'autorange' to false:
layout.xaxis.autorange=false;
layout.yaxis.autorange=false;
layout.xaxis.range=[0,5];
layout.yaxis.range=[0,5];
Plotly.redraw('myDiv');
So that should work.
Is it possible to show the value labels of the y-value below the x-axis instead of showing them inside the chart in Rechart? I have found nothing similar to this in the examples on the Recharts page and the API does not have options for this either. (At least I didn't find them) An example of what I mean is in the link below.
value labels below x-axis
Use the "position" prop with only "y" value to set the position along Y-Axis. This will only fix the Y-Axis position and the X-Axis would change, hence giving you the Tooltip the way you require.
Im trying to create a vertical solid gauge chart with highcharts. It should be really simple, just like a solid gauge but as a vertical bar.
For doing so, I am creating a new series type and extending it from the column chart.
If I set all the options for columns, e.g. hiding the Y Axis labels, hiding the X axis labels, etc. it works more or less like I want to. But, as I am wrapping this into a plugin, I don't think it make sense that the user who defines a chart as a lineargauge should have to worry about setting this informations right. Thus, I need a way to set some default properties to my custom series and I cant find the way to do it.
I have tried wrapping the render and drawGraph function. I have tried setting it on the overriden draw functions of my chart. None of these worked.
You can check my progress on this fiddle: http://jsfiddle.net/w8ou4byv/1/
What I want, for instance, is that the user of my plugin should not have to set:
//...
yAxis: {
labels: { enabled: false },
}
It should be the default value (although it is not the default for the column chart that I am inheriting from).
Thanks!
You use Highcharts.extendClass for creating a new series type. Highcharts provides a dedicated function for this called seriesType: https://api.highcharts.com/class-reference/Highcharts#seriesType
seriesType accepts default options of a new series as an argument - that's the solution for your problem.
I am trying to create a line chart in d3.js.The color of the axes for this chart would be available only at runtime and can vary in a vast set of colors.It is possible to set the colors for the axes using css classes like this.
But since the range of colors that my chart can take is vast and only available at runtime, its not feasible to use this solution.Using call(yAxis).style("stroke",userColor) sets the color for the font use on axes labels and ticks but not the color of axis itself.
Is it possible to set the color of axis in d3.js axis dynamically using javascript?
I think the what you might want is something like the following:
d3.selectAll('.axis path')
.style("stroke", userColor)
.style("fill", userColor)
In this case, .axis path should be some identifying css on your axis lines (possibly put in with d3 as well in your yAxis function). You probably only need one of fill and stroke, try it out to see what works for you. This should operate on the actual axis line, rather than the text element
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