-
Notifications
You must be signed in to change notification settings - Fork 932
Open
Description
I have specified that I would like 7 tick marks. My API returns 7 bar graph data points with 7 dates.
Issue: only 6 dates are displayed.
Create stacked bar graph using Angular 5 and Typescript:
initializeGraph() {
this.createGraph();
this.createYAxis();
this.createXAxis();
}
createGraph() {
this.graph = new Rickshaw.Graph({
element: this.graphContainer.nativeElement,
renderer: 'bar',
stack: true,
interpolation: 'linear',
series: this.graphData
});
this.graph.render();
}
createXAxis() {
this.xAxis = new Rickshaw.Graph.Axis.X({
graph: this.graph,
orientation: 'bottom',
ticks: 7,
element: document.getElementById('x_axis'),
width: this.graphWidth,
tickFormat: function(x) {
const options = { month: 'short', day: 'numeric' };
const barDate = new Date(x * 1000).toLocaleDateString('en-US', options);
console.log(barDate)
return barDate;
}
});
this.xAxis.render();
}
createYAxis() {
this.yAxis = new Rickshaw.Graph.Axis.Y({
graph: this.graph,
element: document.getElementById('y_axis')
});
this.yAxis.render();
}
Stacked bar graph data:
"graph": [
{
"data": [
{
"x": 1522479600,
"y": 0
},
{
"x": 1522566000,
"y": 3.73
},
{
"x": 1522652400,
"y": 0
},
{
"x": 1522738800,
"y": 0.09
},
{
"x": 1522825200,
"y": 0
},
{
"x": 1522911600,
"y": 0.09
},
{
"x": 1522998000,
"y": 0
}
],
"color": "#48d4bb"
},
{
"data": [
{
"x": 1522479600,
"y": 7.45
},
{
"x": 1522566000,
"y": 0
},
{
"x": 1522652400,
"y": 0
},
{
"x": 1522738800,
"y": 0.09
},
{
"x": 1522825200,
"y": 1.23
},
{
"x": 1522911600,
"y": 0
},
{
"x": 1522998000,
"y": 0
}
],
"color": "#3c6df0"
}
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels

