Black Lives Matter. Please consider donating to Black Girls Code today.

Unable to render tick labels on custom range - plotly.js

Here is my config. Would love some advice on how I can render the y axis labels - the same config works on plot.ly online (web app), but there must be something weird about my options that is causing it not to render. Any help is appreciated!

import React, { Component } from 'react';

import Colors from ‘styles/colors’;
import Loader from ‘lib/Loader’;
import createPlotlyComponent from ‘react-plotlyjs’;
import isEqual from ‘lodash/isEqual’;
import range from ‘lodash/range’;

export default class PlotlyChart extends Component {
static defaultProps = {
showFill: false,
lineColor: Colors.teal,
}
_getData() {
let { showFill } = this.props;
return [
{
visible: true,
type: ‘scatter’,
name: ‘Portfolio Performance’,
showlegend: true,
x: this.props.data.map(({ timestamp }) => new Date(timestamp)),
y: this.props.data.map(({ value }) => value),
mode: ‘lines’,
line: {
width: 1.5,
color: this.props.lineColor,
smoothing: 0.1,
dash: ‘solid’,
simplify: true,
shape: ‘spline’,
},
connectgaps: true,
fill: showFill ? ‘tozeroy’ : ‘none’,
fillcolor: Colors.brandTransparent,
marker: {
opacity: 0.5,
maxdisplayed: 5,
},
hoveron: ‘points+fills’,
hoverinfo: ‘x+y’,
cliponaxis: false,
opacity: 1,
xaxis: ‘x’,
yaxis: ‘y’,
hoverlabel: {
bgcolor: Colors.blue,
font: {
family: ‘Hind-Light’,
color: Colors.white,
size: 16,
}
}
},
];
}
_getLayout() {
let width = 400;
let height = 300;
if (typeof window !== ‘undefined’) {
width = window.innerWidth * 0.9;
height = 300;
}
if (this.props.browser.lessThan.medium) {
height = window.innerWidth / 2;
}
if (this.props.browser.greaterThan.medium) {
width = ‘100%’;
}
let yRange = [ Math.min(…this.props.data.map(({ value }) => value)) * 0.99, Math.max(…this.props.data.map(({ value }) => value)) * 1.01 ];

return {
  font: {
    family: 'Hind-Regular',
    size: 12,
    color: Colors.brand,
  },
  title: '',
  autosize: true,
  width: width,
  height: height,
  margin: { t: 0, r: 0, b: 0, l: 0, pad: 0 },
  hidesources: false,
  paper_bgcolor: 'transparent',
  plot_bgcolor: 'transparent',
  showlegend: false,
  xaxis: {
    type: 'date',
    visible: true,
    rangemode: 'normal',
    autorange: true,
    fixedrange: true,
    title: '',
    tickmode: 'auto',
    nticks: 5,
    showline: false,
    showgrid: false,
    zeroline: true,
    showspikes: false,
    anchor: 'y',
    layer: 'below traces',
    hoverformat: "%b %e %Y",
    constrain: 'range',
    constraintoward: 'center',
    exponentformat: 'e',
    showexponent: 'all',
    showticklabels: false,
  },
  yaxis: {
    type: 'linear',
    side: 'right',
    visible: true,
    autorange: false,
    fixedrange: true,
    rangemode: 'normal',
    range: yRange,
    title: '',

    tickmode: 'linear',
    nticks: 5,
    tick0: yRange[0],
    dtick: (yRange[1] - yRange[0]) / 12,
    mirror: false,
    showticklabels: true,
    ticks: "inside",
    tickangle: 'auto',
    ticklen: 5,
    tickwidth: 1,
    tickcolor: Colors.gray,
    tickprefix: '$',
    showtickprefix: 'all',
    tickfont: {
      family: 'Hind-Regular, sans-serif',
      size: 14,
      color: Colors.gray,
    },

    showexponent: 'All',
    exponentformat: 'e',
    showline: true,

    showgrid: true,
    gridwidth: 1,
    gridcolor: Colors.offwhite,

    zeroline: false,

    showspikes: true,
    spikecolor: Colors.darkGreen,
    spikethickness: 1,
    spikedash: 'dot',

    anchor: 'x',
    domain: [ ],
    layer: 'below traces',
    constrain: 'range',
    constraintoward: 'middle',
    hoverformat: ',.2f',
    hovermode: 'closest',
  },
  dragmode: 'zoom',
  hovermode: 'closest',
  legend: { },
  showlegend: false,
};

}
_getConfig() {
return {
displayModeBar: false
};
}

render() {
if (this.props.loading) {
return
}
if (typeof window === ‘undefined’) {
return null;
}
const Plotly = require(‘plotly.js/lib/core’);
const PlotlyComponent = createPlotlyComponent(Plotly);
return (

)
}
}

I don’t understand. By config you mean the data / layout attributes below?

Sorry, yes, I mean the options provided under data and layout

Ok @tgoldenberg so this is really a react question if I understand correctly?

Not sure if it is. There could be something wrong with the options I am putting in, that someone might recognize. Could be something with the react-plotly package, but that wasn’t my first thought.