I've desperately been trying to change the label text color on the charts I'm drawing with nvd3.js - they're drawn in black, but I need them white due to the color of the page they are included on.
I'm using nvd3.js version 1.1.15BETA with d3.js version 3.3.13, integrated into my AngularJS app via the angularjs-nvd3-directives version 0.0.7.
Does anyone have any suggestions on what to do to accomplish this?
Thanks.
Changing the text color in your chart, try this :
svg text {
fill: white;
}
To change the label color in the pie chart
.nvd3.nv-pie .nv-slice text {
fill: white !important;
}
Here is a working fiddle.
Hope it helps
Hope it helps:
in your controller:
$scope.callbackFunction = function(){
return function(){
d3.selectAll('.nv-pieLabels text').style('fill', "white");
}
}
In your HTML (the only important thing is callback=callbackFunction()):
<nvd3-pie-chart
data="exampleData"
id="exampleId"
color="colorFunction()"
width="1100"
height="700"
x="xFunction()"
y="yFunction()"
rotateLabels="120"
showLabels="true"
callback="callbackFunction()">
<svg></svg>
</nvd3-pie-chart>
Credits to:
https://github.com/cmaurer/angularjs-nvd3-directives/blob/master/examples/nvd3.callback.html
&
https://github.com/krispo/angular-nvd3/issues/8
Related
I have this polar chart from react chart js 2. I want these (pointed with red arrow) background lines to be removed. Is it possible to remove these lines? I have tried several solutions like changing background lines image color to background etc. Here is codebox: https://codesandbox.io/s/agitated-wood-2xpk3p?file=/App.tsx. Anyhelp would be greatly appreciated.
As you can see you are getting TS errors because you are using V2 syntax, if you configure your options in the following way it works fine:
const chartOptions = {
scales: {
r: {
grid: {
display: false
}
}
}
};
https://codesandbox.io/s/hidden-tree-8gdqxg?file=/App.tsx
Just started using progressbarwidget, I want the text from my textTpl to be center aligned within the progress bar at all times regardless of what percentage the bar is at, when I mean centered I mean the center of the progress bar and not center of the progress value. See fiddle below and attached image
https://fiddle.sencha.com/#fiddle/1dm7
I seen a reference on another thread to set position : relative, this does set the text to the center of the bar but doing so means the bar does not show the progress anymore. I see when the progress bar is created it has 2 divs, containing the following classes, x-progress-text and x-progress-bar, both contain the text value.
Thanks in advance
You can extend ProgressBarWidget, and override the template, like:
Ext.define('Fiddle.view.ProgressBarWidget', {
extend: 'Ext.ProgressBarWidget',
xtype: 'fiddle-progressbarwidget',
template: [{
reference: 'backgroundEl'
}, {
reference: 'barEl'
}, {
reference: 'textEl',
style: {
left: 0,
right: 0
}
}],
});
Working example: https://fiddle.sencha.com/#fiddle/1dn4
The definitive solution is to add an onResize handler on the progress bar container:
onResize: function () {
var me = this,
progressBar = me.down('progressbarwidget');
// Set text width to element width so that it can be centered
progressBar.setWidth(progressBar.el.getWidth());
}
This idea is copied from what happens in Ext.grid.column.Widget.onResize().
The solution from user CD.. doesn't work (nor does the one in user2751034 comment)
in the case you have two-color-text, like in Classic theme:
even if you reproduce the template in Sencha sources (with textEl children of barEl):
I am using https://github.com/n3-charts/line-chart library to generate charts. Is it possible to change font size of axis labels? I could not find such option in official documentation.
Something like this on the CSS would work
.tick text {
font-size: 120%;
}
Edit: The appearance of many SVG elements can be configured using CSS, just inspect them in the browser and try modifying them.
When the chart is generated it has it's own classes that you can take advantage of overwriting... Here are all the axis for example:
// X-Axis Font
.x-axis {
font-size: 120%;
}
// Left Y-Axis
.y-axis {
font-size: 130%;
}
// Right Y-Axis
.y2-axis {
font-size: 140%;
}
Hope that helps.
Good morning
I am using the angularjs-nvd3-directives, which is great, but I am having difficulties when setting the color of a multi bar chart (http://cmaurer.github.io/angularjs-nvd3-directives/multi.bar.chart.html).
The show legend works well:
<div ng-controller="ExampleCtrl">
<nvd3-multi-bar-chart
data="exampleData"
id="showLegendExample"
width="550"
height="300"
showXAxis="true"
showYAxis="true"
xAxisTickFormat="xAxisTickFormatFunction()"
showLegend="true">
<svg></svg>
</nvd3-multi-bar-chart>
</div>
But when I add this option in conjunction with color="colorFunction()" where,
var colorArray = ['#FF0000', '#0000FF', '#FFFF00', '#00FFFF'];
$scope.colorFunction = function() {
return function(d, i) {
return colorArray[i];
};
}
The color of the chart objects updates, but not legend. Is this a limitation of angularjs-nvd3-directives, that I can either set the color or have a legend and not both, or am I missing something?
I have a jqplot for a line graph but my legend is becoming too huge. I want to implement a scrollable functionality for the legend. I tried to do the following :
table.jqplot-table-legend {
display: block;
height: 350px;
overflow-y: scroll;
}
in the css file and in my ctp file, i tried
legend: {
show: true,
location: 'ne',
rendererOptions: {numberColumns: 2}
}
as was mentioned in previous posts but none seem to work for me.
Please help.
If I apply your css before or after the chart has rendered, it works fine with one change. I had to increase it's z-index so the scroll bar is on top and clickable. Here's an example of applying it after the chart has rendered:
plot1 = jQuery.jqplot ('chart1', data, opts);
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display','block');
legendTable.css('z-index',100);
legendTable.css('height','100px');
legendTable.css('overflow-y','scroll');
See fiddle here.