CODEWITHSUNDEEP
angularhighcharts
Sarah
Sarah

Reputation: 65

Adding Classname to series data in angular highcharts

I am trying to apply css class names to the pie chart data.

I am trying to implement a pie chart with customized colors using angular highcharts.I observed that using the regular version of highcharts, the property 'className' works to induce the customized colors as follows: http://jsfiddle.net/sara12/stkw17uh/

import { Component, Input, OnInit } from '@angular/core';
    import { Chart, Highcharts, StockChart } from 'angular-highcharts';



    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })


         export class AppComponent implements OnInit {
              name = 'Angular';
              public chart: StockChart;
              public highChartsOptions: Highcharts.Options;
              constructor() { }



     ngOnInit() {
        // [0, 2], [1, 2], [2, 3], [4, 4], [4, 5]
        this.loadChart([


        ]
        );
      }

      loadChart(data?): any {
        this.highChartsOptions = {
          chart: { type: 'pie' },
          title: { text: '' },
          legend: { enabled: false },
          plotOptions: { series: { dataLabels: { enabled: true } } },
          series: [{ name: 'random series', data: data }],



        };
        this.handleIntervals();
      }
          ngAfterViewInit(): void {
            this.chart = new Chart(this.highChartsOptions);
          }



     handleIntervals() {

           let data= [{name:"FireFox",y:6,className:'color-red'},["MSIE",4],["Chrome",7]];
          this.highChartsOptions.series[0].data = data;



      }
    }

TEMPLATE:

        <div class='chart-wrapper'><div class='chart' [chart]='chart'></div></div>

CSS:


    .color-red{
      fill:green !important;

    }

The above code used the angular highchart. I have included the component ,template and css code. Even after i add the className property to the series data, i see that change does not get reflected. However, when i open the DOM, i do see the class getting appended to the SVG path's classname .

Also when i use the 'color' attribute instead of className, the changes get reflected on the chart.

Upvotes: 1

Views: 925

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

Unfortunately, you can add styles only globally to reflect on the chart. Add a new global CSS file only for the chart styles or put them in a global style.css file.

global style.css:

/* You can add global styles to this file, and also import other style files */

html,
body {
  font-family: sans-serif;
}

.color-red {
  fill: #0f00ff;
  stroke: #ff00ff;
}

Demo:

Another thread:

Upvotes: 2

Related Questions