React Chartist: make red label

Question

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

 .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>

@ehsan, edited question – Утка Обычная Aug 20 '20 at 04:57 — Утка Обычная, Aug 20 '20 at 04:57

score 0 · Answer 1 · answered Aug 20 '20 at 09:29

0

The ugliest solution would be:

Get the xPath of the label with the browser's developer mode (F12).
Find the Element with the xPath. (Using JavaScript or TypeScript).
Add CSS Class to the found Element (Using JavaScript or TypeScript).

answered Aug 20 '20 at 09:29

Amel

653
9
15

Problem that exist several items label(Mu, We,...) And it have one class with one name (.ct-label .ct-horizontal .ct-end). I dont know how get the access to item with some text (Su, Sa) – Утка Обычная Aug 20 '20 at 09:47
In browser's developer mode when you select a label you can get it's xPath with right click on Element -> Copy -> Copy xPath. And with the xPath you can access the item (Su for example). Then you can add a new Css Class to that one label. [How to get xPath with Chrome?](https://stackoverflow.com/questions/3030487/is-there-a-way-to-get-the-xpath-in-google-chrome) – Amel Aug 20 '20 at 09:52
thank you. but chart can be dynamicly change, example i can turn from mode week to 2 week and i need automatticly set color for all weekend – Утка Обычная Aug 20 '20 at 09:58
Now i set listener onDraw. I got access to ForeignObject whick consist Span with text. I can to define Sa ans Su labels, but i cant to set Color:red (i cant get access to tag Span) – Утка Обычная Aug 20 '20 at 10:00

score 0 · Accepted Answer · answered Aug 20 '20 at 10:30

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';
      }
    }
  }

React Chartist: make red label

2 Answers2