I'm working on a stacked bar data chart in order to display some informations using Chart.js 2.0.2 and Angular-Chart 1.0.0.
I would like to detect when the user scroll to the end of the chart container, then add some data to the chart by keeping the ratio (height/width) of the chart.
The thing is, chart.js provides an iframe and I don't know how to add data and keep the space between bar for example. If I resize the canvas, this doesn't work. I have a basic chart with options.responsive = true, and I add data to this chart.
However, even if only the chart wrapper width changes programmatically, the height of the chart changes too. This is a strange behavior of responsiveness.
Is it another way to change only the width of the chart to keep the same space between bar chart ?
do this:
options: {
responsive: true,
maintainAspectRatio: false
};
Then you can pragmatically update the height/width as you see fit with:
chart.canvas.parentNode.style.width = '128px';
//NOTE: I'm running 2.6
Related
I am using Chartjs 4.2.0 in order to create a line chart that only shows a specified amount of data-points based on the slider position. This does not add more data-points, but instead acts more like a sliding window only showing 2 items at a time for example. I could not find any examples of this being done online currently so I decided to start creating my own plugin for Chartjs.
So far, as shown below I have a basic line graph as taken from the Chartjs samples page and used the min and max options on the xAxis. Looking through the Chartjs documentation the min and max values seem like my best bet in creating the sliding window effect that I need for my chart. The blue slider bar below does move within the canvas and it does output the precent to the end of the lightgrey background bar. Just trying to figure out the best way to connect the bar and graph together.
...
scales: {
y: {
beginAtZero: true
},
x: {
min: 0,
max: 2
}
}
...
I'm trying to use ngx-charts to display an area chart that spans the full width of my page (it's supposed to match the width of the horizontal line above it). However, it appears that when generating a chart there is some sort of padding inside the svg, which I imagine is useful if you have a legend etc but I am not using that, here's what I see:
See how the actual area chart doesn't expand the full width?
My code:
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="heatmaps"
[curve]="curve"
[showGridLines]="showGridLines"
[tooltipDisabled]="tooltipDisabled"
(select)="onSelect($event)">
</ngx-charts-area-chart>
And my config variables in my component.ts
curve = d3.curveNatural;
showGridLines = false;
tooltipDisabled = true;
colorScheme = {
domain: ['#3f3f3f']
};
As you can see I am not using the view attribute so the chart should expand to the width of the page. I was thinking I could utilize a viewBox on the svg but not quite sure, any thoughts?
Thanks!
I need to build an UI (HTML 5) with two main components: customized chart drawn in HTML 5 canvas; a table.
The gotcha is that the chart must be aligned with the table. If you horizontally scroll the table, the chart content will scroll too.
One important restriction is that the chart is very customized. I will not be able to use any existing chart component. I will have to code it myself plotting it on canvas.
I am struggling to figure out how to do it. How to trigger a repaint on the canvas during the scroll? How to know the corresponding coordinates on the canvas of the beginning of each table cell? How do I write the HTML/CSS of both components to ensure that the layout will not break on different screen sizes?
I am still planning the project and I am pretty open to use any framework/language.
I need some light here.
Can you help?
Thanks!
You can get the scroll position with jQuery scrollLeft() and set your canvas repaint function to jquery scroll() so that it's updated whenever the scroll position changes.
table = $('#container')
updatePosition = () => {
// Synchronize canvas here:
repaintCanvas(table.scrollLeft());
}
table.scroll(updatePosition);
Here is a demo JSFiddle: http://jsfiddle.net/4eg39bfm/5/
Following this demo here (http://www.highcharts.com/docs/chart-and-series-types/combining-chart-types) I am trying to have a Pie chart and a bar chart on the same page.
The catch is I would like the Pie chart to be large on the left and then the bar chart on the right. I see the code to move the pie chart around, but I cannot figure out how to do the same with the bar chart, as it seems to want to span the entire container width. I understand that I could have two independent charts and place them in their own floating DIVs, but since the combining of charts is possible, I thought this would be a viable option.
You can set chart.marginLeft to half of the chart width. And set pie.center x coordinate to a negative value.
chart: {
marginLeft: 400
},
series: [{
center: ['-75%', '50%'],
example: http://jsfiddle.net/L55w9n53/
Am trying to build vertical bar chart using nvd3 charts.
Problem :
If chart has single record, bar width reaches 3/4 of the chart width.
Question :
How to change width of the bars in Discrete bar chart?
Have attached chart please guide me..
If you look at the source here. You'll see that the width of the rectangle is calculated based on the number of items using rangeBand. There doesn't appear to be a way to set the width of the rectangle though the library's API.
If you didn't want to patch the library, you could create additional fake bars with zero data and provide a label formatter that would return an empty string if the value was zero, but that assumes zero is not a valid number in your data set.
Use the follwing code to set the width
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
or you can use
groupSpacing : 0.57,