ChartLabel style prop not overriding default styles

[OPerel]

Hello, I'm trying to set the Chart Label's font-size via the style attribute. I see my styles being rendered and if they don't collide with the default styles it's all good. But if the style property is also set in the react-vis stylesheet, e.g font-size, than the stylesheet styles override my custom styles.

<ChartLabel  
    text="חומר גלם קיים"
    includeMargin={false}
    xPercent={0.4}
    yPercent={0.05}
    style={{
          transform: 'rotate(270)',
          fontSize: '1.2em'
     }}
    />

• Note: the chart is in hebrew, it's not a bug or anything

Thanks a lot!!

[DiegoGorgazzi]

Same problem here.

fontWeight and transform seem to be the Only two properties working.

[jkerrwilson]

This is an issue for me as well. The inner class applied to the text appears to override any passed styles.

[maltebaer]

Same here: fill and fontSize won't work.

[ajosep514]

I found a round-about-way of doing this. I created a .css and am over writing their class for this element.

newStyles.css .rv-xy-plot__axis__title text{fill:#6b6b76;font-size:18px;}

In index.jsx import 'react-vis/dist/style.css'; import './newStyles.css';

[OPerel]

Thanks @ajosep514

[jemuelpup]

try this

<FlexibleWidthXYPlot 
            height={300}
            xType="ordinal">
                <HorizontalGridLines style={{ stroke: '#dedede' }} />
                <XAxis
                    title="Date"
                    style={{
                        line: {stroke: '#ADDDE1'},
                        ticks: {stroke: '#ADDDE1'},
                        text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
                    }}
                    tickLabelAngle={-35}
                />
                <YAxis />
                <LineSeries
                    className="productive-hours-line"
                    style={{strokeWidth: '2px',stroke: '#eca251'}}
                    data={hoursMatrix}
                />
                <LineSeries
                    className="events-line"
                    style={{strokeWidth: '2px',stroke: '#0398a8'}}
                    data={taskMatrix}
                />
            </FlexibleWidthXYPlot>
```