Search code examples
javascriptreactjschartscolorsamcharts4

How to change chart color with am4chart


I'm using am4chart to making line chart on my website. The background of the website is black, so I have to render the chart white https://i.sstatic.net/eHMw9.jpg

I have try to change the chart fill when I create the chart, it absolutely dont work. But when I change chart stroke it work (but only the outline and this is ugly)

Here is the function where I create the chart

/* Creating chart and set language to french */
      let chart = am4core.create("chartdiv", am4charts.XYChart);
      chart.paddingRight = 20;      
      chart.language.locale = am4lang_fr_FR;
      chart.fill = am4core.color("#fff")
      //chart.stroke = am4core.color("#fff")

      /* Create date, values axis and cursor */
      let dateAxis = chart.xAxes.push(new am4charts.DateAxis());  
      dateAxis.renderer.grid.template.location = 0;
      let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.tooltip.disabled = true;
      valueAxis.renderer.minWidth = 35;      
      chart.cursor = new am4charts.XYCursor();

      /* Setting up the scrollbar */
      let scrollbarX = new am4charts.XYChartScrollbar();      
      chart.scrollbarX = scrollbarX;

I want the date and value axis and the scollbar writting to be blank (link in my image but without stroke) https://i.sstatic.net/24xQM.jpg


Solution

  • You need to access background property of a chart. chart itself has no fill property. Use it like this:

    chart.background.fill = am4core.color("#123")
    

    UPDATE: To change the color of the axis labels you need to do that manually on AxisLabel object. In your case I think it should look something like this:

    dateAxis.renderer.labels.template.fill = am4core.color("#fff");
    valueAxis.renderer.labels.template.fill = am4core.color("#fff");