I want to make the transition/animation effect when selecting/unselecting items longer, I'm trying to set the duration parameter of nvd3 pie chart to be something long like 10 seconds (or 10000 ms) but it has no effect on the pie chart,
I tried changing the duration value and I also tried to add transitionDuration property,
$scope.options = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 10000,
transitionDuration: 10000
}
};
You can see the following example: http://plnkr.co/edit/vtKWU0?p=preview
It looks like a bug in nvd3.
https://github.com/novus/nvd3/issues/1474#issuecomment-178333163
angular-nvd3 is a wrapper around nvd3.
Related
I am trying to have stacked bar with different color as below.
I could achive bar as below however looking for -
1. label under each block and count.
2. On click on one of the block, color for rest of the blocks should be changed (should be same as hover behaviour)
Any suggestion and help would be appreciated.
You can use stacked bar chart with enabled data labels:
plotOptions: {
bar: {
stacking: 'normal',
dataLabels: {
color: 'black',
enabled: true,
y: 80
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/wg46umjp/
API Reference: https://api.highcharts.com/highcharts/plotOptions.bar.dataLabels
I have implemented a scatterplot using react-plotly.js I would like the chart to re-size itself when the page layout changes. But currently, the layout of the chart doesn't change by itself. If I explicitly perform some function on the chart which forces the chart to redraw itself then only the chart width changes.
I applied useResizeHandler property and have set autosize to true. But that doesn't make any difference either.
<Plot
useResizeHandler
style={{ width: '100%' }}
data={chartData}
onClick={(data) => this.handlePlotClick(data)}
type={'scatter'}
layout={this.layout} />
const layout = {
autosize: true,
dragmode: true,
margin: {
l: 5,
r: 5,
t: 10,
b: 10,
pad: 0,
autoexpand: true
},
hovermode: 'closest',
hoverlabel: {
bgcolor: 'rgba(0,0,0,1)',
bordercolor: 'rgba(200,200,200,1)'
},
height: '650',
yaxis: {
visible: false
},
xaxis: {
autorange: false,
showline: true,
fixedrange: false, // true disables range selection on main graph
rangeslider: {
range: this.state.sliderRange,
visible: true,
borderwidth: 1,
bordercolor: '#000'
}
}
};
}
As you can see in the screenshot above, the div.svg-container has same width as the main-svg. But it still leaves white space on the right. I am unable to debug why it would behave that way. If I explicitly perform zoom on the chart that will redraw the plot then it will behave correctly. But I would like it to automatically resize when the page layout changes.
I was stuck on this problem too. Try window.dispatchEvent(new Event('resize')) from http://codrate.com/questions/how-can-trigger-the-window-resize-event-manually-in-javascript
I was calling resizeHandler when my chart is resized by dragging.
resizeHandler = () => {
this.child.resizeHandler();
window.dispatchEvent(new Event('resize'));
}
The charts always autoscales when the chart is resized, so I basically trigger the window resize when my chart size is changed. So for you, when you detect the page layout changes you can trigger the window resize.
I try to change duration property for multiChart but It does not work.
It is example
{
chart: {
type: 'multiChart',
duration: 500,
...
}
}
http://plnkr.co/edit/ohZDWMq4zxear9V98ItO?p=preview
angular-nvd3 is a wrapper for nvd3, it can only provide what nvd3 provides.
Looking at the nvd3 documentation, it seems there is no duration option for multicharts.
http://nvd3-community.github.io/nvd3/examples/documentation.html#multiChart
Update: a multiChart is composed of six subcharts (lines1, lines2, bars1, bars2, stack1, and stack2). Each of those charts has its own duration options.
so for lines1, lines2, bars1, bars2, stack1, and stack2 you can set duration. You can get the behavior you want.
{
chart: {
type: 'multiChart',
...
bars1: {
duration: 2000
},
bars2: {
duration: 2000
},
...
}
}
http://plnkr.co/edit/23FZtmOeX46PZDAW5XIi?p=preview
I think there are two bugs here.
nvd3's multichart model should have a master duration option that sets all the subcharts durations
until that's fixed, angular-nvd3's multichart example should set the duration option of the subcharts
I am using nvd3 and trying to add event handling while clicking on the chart. But I face some problems while implementing it and I am not able to get a solution due to lack of documentation of nvd3. I followed this link, but I still get the following error in the console:
ReferenceError: chart is not defined
Can anyone tell me what I am missing or any best solution for the event handling in nvd3.
Probably your problem is the name of the graph variable;
I make a fiddle for you.
In my example, "chart" is the name of the graph variable. Check out that also in your case it's the same.
var chart = nv.models.multiBarChart();
Anyway, with the fiddle you can see the full code. If you click on an item, you can see the messages in console.
http://jsfiddle.net/g952qb5c/
As suggested by Giordano, I looked for the name of the graph and the dispatch events. And then I have added these event listener in the options like this.
Note: This solution worked for the nvd3 and angular.
$scope.options2 = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
},
pie:{
dispatch: {
elementClick : function(e){
console.log('element: ' + e.value);
console.log(e);
}
}
}
}
};
Hope this will help to others also.
I am trying to work with nvd3 lineWithFocusChart for time series data. But surprisingly y axis ticks are appearing as 000.00. The json data is in correct format as given in nvd3 website. I have placed my reference plunker at http://plnkr.co/edit/QwMbTL4co0wMVKaQurxq?p=preview.
In order to sort the time series data, I have used the following function. With this, data is displayed properly except y-axis ticks issue. However tool tip is appearing fine with its correct values. What shall I do, to fix the appearance of y-axis ticks as 000.00
angular.forEach($scope.data, function(
series, index) {
series.values.sort(function(a, b) {
return a.x - b.x;
});
});
Your chart width is hiding the values.
Add a width : 700,
And change the margins
margin : {
top: 20,
right: 20,
bottom: 60,
left: 100
},
UPDATE : You could also completely remove width and the margin , by default it will take the div size and re-sieze automatically.
Hope it helps
You just need to not format the Y axis :
yAxis: {
axisLabel: 'Y Axis',
tickFormat: function(d){
return d;
},
rotateYLabel: false
},
Updated plunker.