Mixpanel charts - how to show solid and dotted line for incomplete week

Question

By default, mixpanel.com shows a dotted line on a chart that represents an incomplete week, while all the other weeks are a solid line (see above pic).

I'm calling .MPChart() to create a chart but it's only showing solid lines. I'd like to see the dotted line at the end. I've looked through https://mixpanel.com/help/platform#ui/chart and http://api.highcharts.com/highcharts, but I can't find any way to do this.

Here is some code,

Template:

    <div ref="chart123" id="chart123"></div>

JS:

    // using ReactJS refs
    chart123 = $(this.refs.chart123).MPChart({
        chartType: 'line',
        highchartsOptions: {
            tooltip: {
                formatter: function () {
                    return self.formatTooltip(this)
                }
            }
        }
    });

    chart123.MPChart('setData', this.state.data);

Here's the same question but they were using Chart.js: Can we draw a Line Chart with both solid and dotted line in it?

Answer 1

See working JSFiddle here: http://jsfiddle.net/weilandia/ykpnoeLf/.

The example above also does a rough mock the Mixpanel tooltip.

As far as the dotted line for incomplete time intervals, I use the following functions to update the series object(s) before initializing with Highcharts:

function specifyIncompleteZones(series, intervalType) {
  if (series.data.length > 0) {
    var lastDataPoint = series.data[series.data.length - 1];
    var penultimateDataPoint = series.data[series.data.length - 2];
    if (seriesIsIncomplete(lastDataPoint[0], intervalType)) {
      series.zoneAxis = 'x';
      series.zones = [
        { value: penultimateDataPoint[0] },
        { dashStyle: 'dash' }
      ];
    }
  }
}

function seriesIsIncomplete(pointValue, intervalType) {
  var startDate = moment(pointValue).utc();
  var endDate = startDate.endOf(intervalType).toDate();

  return moment().isBefore(endDate);
}