Using css to customise highcharts in Ionic 4

问题

I am using ionic 4 with Highcharts. Everything is working perfectly apart from me not being able to customise the charts through my component's css. I've tried a couple of things but cannot get it to work.

Is there anything I should be adding in the scss to make it be applied on the graph?

A summary of the component:

In my component.ts:


import * as HighCharts from 'highcharts';

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

In my component.html:

 <div id="container" style="display: block;"></div>

In my component.scss:

   .highcharts-loading {
      background: silver;
    }
    .highcharts-loading-inner {
      color: blue;
    }

回答1:

Unfortunately, you can add styles only globally. So inside angular-cli.json add CSS file for the chart - example below chart-styles.css:

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets", "favicon.ico"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "prefix": "app",
      "styles": ["styles.css", "chart-styles.css"],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}

If you want to use only CSS styles to style your chart you can enable styled mode:

  chartOptions = {
    chart: {
      styledMode: true
    }
  }

Demo:

style mode: https://codesandbox.io/s/cqxuh
https://codesandbox.io/s/angular-3v41p

Docs:

https://www.highcharts.com/docs/chart-design-and-style/style-by-css

回答2:

in Highcharts you need to use useHTML property to make things happen. I'm not familiar with ionic but I had the same issue and the following helped

plotOptions: { series: { dataLabels: { useHTML: true, } } }

来源：https://stackoverflow.com/questions/56173920/using-css-to-customise-highcharts-in-ionic-4

标签

Highcharts

Sass

ionic4