alteration of colors in a Chartist chart

Question

alteration of colors in a Chartist chart

Currently, I am working with a chartist graph where the colors are defined at a framework level. However, I need to make changes to the colors for a specific graph without altering the framework level settings. I attempted to create a .less file, but unfortunately, the changes are not being reflected.

Are there any alternative methods to adjust the color of a bar graph? Also, if I add more bars, I would like the colors to be different for each.

For reference, the link to the framework changes for chartist can be found here.

The color changes need to be made in the file located at here.

I have included a snippet of code in the .less file, but the changes are not showing up. Any suggestions or tips would be greatly appreciated.

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

Thank you.

html css angularjs chartist.js

Answer 1

Answer №1

Even though this response is a bit delayed, I wanted to share a helpful Java script solution that I came across on this website. The solution demonstrates how you can dynamically color various components.

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

Answer 2

Even though this response is a bit delayed, I wanted to share a helpful Java script solution that I came across on this website. The solution demonstrates how you can dynamically color various components.

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

Answer 3

Answer №2

I have recently established separate CSS (LESS) styles for each individual chart component.

.sales-chart {
    .ct-series-a {
        .ct-area {
            fill: #F14A78;
        }

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

    .ct-series-b {
        .ct-area {
            fill: #65C6F9;
        }

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

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

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

Answer 4

I have recently established separate CSS (LESS) styles for each individual chart component.

.sales-chart {
    .ct-series-a {
        .ct-area {
            fill: #F14A78;
        }

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

    .ct-series-b {
        .ct-area {
            fill: #65C6F9;
        }

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

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

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

Answer 5

Answer №3

Less files require compilation into CSS as they are not directly CSS. Find a suitable compiler on GitHub or visit lesscss.org for more options.

Answer 6

Less files require compilation into CSS as they are not directly CSS. Find a suitable compiler on GitHub or visit lesscss.org for more options.

alteration of colors in a Chartist chart

Answer №1

Answer №2

Answer №3

Similar questions

The function is not explicitly declared within the instance, yet it is being cited during the rendering process in a .vue

Utilizing an array of labels and values to link select and ng-options for binding

Displaying information from four different arrays in a column using ng-repeat

Taking out the z-index from the transition code

Avoid opening the page when attempting to log in with jquery, ajax, and php

Stay tuned for updates on elements being loaded into a div from an external source

Testing the Angular service call in a unit test using karma and jasmine

The justify-content-around property in Bootstrap-4 does not seem to be functioning as expected when

Alignment of headers and footers in email newsletters for various email clients<td>

Actions cannot be performed on elements generated by ng-repeat

The dividers flicker in and out of view

How can elements be displayed differently depending on the return value of a function?

Angular code causing an unexpected blank page to be printed again

Discovering the method to access a file without the standard .html or .php extension on the local host at 127.0.0

What is the solution to prevent the inadvertent activation of onmouseEnter when onmouseLeave

The arrangement vanishes when using identical html/css coding

Sending emails to multiple groups in Opencart can be easily achieved with the

What is the best way to combine two arrays into a single array using AngularJS?

The camera continues to move smoothly after the static-body effect has been activated

Stopping Angular.js $http requests within a bind() event