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 (
)
}
}