esnet
ChartRow cuts off LineChart and ScatterChart
I'm following the source code of the climate example to construct a ScatterChart overlaid on a LineChart with a flag EventMarker. Unfortunately, the right hand side of the chart is cut off. In the following picture, I have my mouse over the far-right point, however the flag marker only appears for the previous point. If I move the mouse any further the chart ends and so the flag marker never appears.
I was playing around with the climate example and noticed that the data points of the chart are slightly offset horizontally in the forward direction. So for example, hovering over '1910' on the x-axis maps to the '1910' point on the chart, but these two points do not line up exactly. This is not the case for the chart I have created. I have circled the beginning of each chart to highlight this discrepancy.
Here is my source code for my charts:
Date.prototype.addDays = function (days) { // eslint-disable-line no-extend-native
var dat = new Date(this.valueOf())
dat.setDate(dat.getDate() + days)
return dat
}
class AcornLineChart extends Component {
constructor (props) {
super(props)
this.state = {
tracker: null,
trackerValue: '',
trackerEvent: null,
markerMode: 'flag'
}
}
handleTrackerChanged (t) {
if (t) {
const { series } = this.state
const e = series.atTime(t)
const eventTime = new Date(
e.begin().getTime() + (e.end().getTime() - e.begin().getTime()) / 2
)
this.setState({ tracker: new Date(e.begin().getTime()), trackerValue: e.get('value'), trackerEvent: e })
} else {
this.setState({ tracker: null, trackerValue: null, trackerEvent: null })
}
}
componentDidUpdate (prevProps) {
if (prevProps.data && !prevProps.data.lineChartPond && this.props.data.lineChartPond) {
this.setState({
series: new TimeSeries({
name: 'completions',
columns: ['time', 'value'],
points: this.props.data.lineChartPond
})
})
}
}
render () {
const { series } = this.state
const axisStyle = {
values: {
labelColor: 'grey',
labelWeight: 100,
labelSize: 11
},
axis: {
axisColor: 'grey',
axisWidth: 1
}
}
return (
<Fragment>
{
series &&
<Resizable>
<ChartContainer
title='Course Completions'
timeRange={series.range()}
timeAxisStyle={axisStyle}
onTrackerChanged={this.handleTrackerChanged.bind(this)}
>
<ChartRow height='200'>
<YAxis
id='axis1'
label='Course Completions'
labelOffset={0}
transition={300}
min={series.min()}
max={series.max()}
width='60'
type='linear'
// format='$,.2f'
showGrid
/>
<Charts>
<ScatterChart
axis='axis1'
series={series}
/>
<LineChart axis='axis1' series={series} interpolation='curveNatural' />
<EventMarker
type='flag'
axis='axis1'
event={this.state.trackerEvent}
column='value'
info={[{ label: 'Completions', value: this.state.trackerValue }]}
infoTimeFormat={index => new Date(index).addDays(1).toLocaleString(undefined, { month: 'long', year: 'numeric' })}
infoWidth={120}
markerRadius={2}
markerStyle={{ fill: 'black' }}
/>
</Charts>
</ChartRow>
</ChartContainer>
</Resizable>
}
</Fragment>
)
}
}
