javascriptcssreactjschartschartist.js

React Chartist: make red label


How i can make red label at chart. I want to make red just Sunday and Saturday and leave the others gray:

t

 .ct-label {
    font-size: 9px;
    color: red; // this is make all label the red
  }
<div style={{height: '100%'}} className='position-relative ct-chart ct-hidden-points'>
          <ChartistGraph
            data={dataForChart}
            options={options}
            type='Line'
            style={{height: '80px', width: '100%'}}
          />
</div>

Solution

  • I solved this problem adding action listener to chart

    function handleDrawChart(event) {
        if (event.type === 'label' && event.axis.units.pos === 'x') {
          if (event.text.match(/S[au]/gm)) {
            /* eslint-disable-next-line */
            event.element._node.children[0].style.color = 'red';
          }
        }
      }