CODEWITHSUNDEEP
htmlcssangularjschartist.js
user1190615
user1190615

Reputation: 111

chartist graph color change

I am using a chartist graph and the colours are defined in a framework level, but i need to change it in for a specific graph, so i cannot change in the frame work level, tried to create a .less file but still the changes are not reflecting.

is there any other option on how to change the colour of a bar graph and if i add more bars, the colours should be different.

PS : link for the frame work changes for chartist. https://github.com/capitalone/Hygieia/tree/master/UI/src/app/chartist

color change need to be done in https://github.com/capitalone/Hygieia/blob/master/UI/src/components/widgets/build/build.less

wrote a piece of code given in .less file , but it's not reflecting... any inputs please.

 .ct-series-a .ct-bar {
  stroke: white;
  stroke-width: 20px;
}
.ct-series-b .ct-bar {
      stroke: blue;
      stroke-width: 20px;
    }

Thanks

Upvotes: 1

Views: 3817

Answers (3)

MartinC
MartinC

Reputation: 885

I just setup a group of css (less) for each chart.

.profit-chart {
    .ct-series-a {
        .ct-area {
            fill: #158BE9;
        }

        .ct-bar, .ct-line, .ct-point, .ct-slice-donut {
            stroke: #158BE9;
        }
    }

    .ct-series-b {
        .ct-area {
            fill: #73b5eb;
        }

        .ct-bar, .ct-line, .ct-point, .ct-slice-donut {
            stroke: #73b5eb;
            /*stroke-dasharray: 5px;*/
        }
    }

    .ct-series-c {
        .ct-area {
            fill: #f28e2b;
        }

        .ct-bar, .ct-line, .ct-point, .ct-slice-donut {
            stroke: #f28e2b;
        }
    }
}

Upvotes: 1

IsaacK
IsaacK

Reputation: 1298

I know this answer may be quite late but I found a java script solution from this link, It shows how you can dynamically color different components.

var chart = new Chartist.Bar('#barChart', data, options, responsiveOptions);
    chart.on('draw', function(context) {


      if(context.type === 'bar') {
         context.element.attr({
          style: 'stroke:  red'
        });
      }else if(context.type === 'point') {
            context.element.attr({
            style: 'stroke:  blue'
        });
      }else if(context.type === 'line') {
          context.element.attr({
            style: 'stroke:  green'
        });
      }
    });

Upvotes: 2

Evgeniy Chekan
Evgeniy Chekan

Reputation: 2655

less files are not css, they need to be compiled into css. Get any compiler on github or at lesscss.org.

Upvotes: 0

Related Questions