Amcharts 5 CSS Element

Question

I'm using Amchart 5, I trying to customize the colors, labels and other stuffs using CSS. But Amchart 5 only shows the charts as Canvas not as individual element like amchart 4.

amchart Canvas - Inspect Panel

If someone have solution please let me know, it'll be very helpful.

Thank you in advance.

I'm expecting a code to enables the css in the chart.

Answer 1

You cannot use CSS this way with amCharts 5 because, contrary to amCharts 4, it uses the Canvas API instead of SVG. There is an exception when you need HTML content, though...

Canvas API is generally way faster than SVG, however it paints outside DOM tree, which means you can't target individual chart elements via JavaScript or CSS.

Migrating from amCharts 4 – amCharts 5 Documentation

To customize chart elements, you have to define settings in your JS code. A label, for instance, can be configured like this:

am5.Label.new(root, {
  text: "Title",
  fill: am5.color("#ff0000"),
  fontSize: 25,
  fontWeight: "500",
  fontStyle: "italic",
  textAlign: "center",
  x: am5.percent(50),
  centerX: am5.percent(50),
  dy: -60
  // ...
});

You can find a complete list of settings there: Label – amCharts 5 Documentation

Here is a basic example:

am5.ready(() => {
  
  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {
    paddingTop: 50
  }));
  
  // ========================= HERE =========================
  
  chart.children.unshift(am5.Label.new(root, {
    text: "Title",
    fill: am5.color("#ff0000"),
    fontSize: 25,
    fontWeight: "500",
    fontStyle: "italic",
    textAlign: "center",
    x: am5.percent(50),
    centerX: am5.percent(50),
    dy: -50
  }));
  
  // ==================================================

  let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererX.new(root, {})
  }));

  let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  }));

  let series = chart.series.push(am5xy.ColumnSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    categoryXField: "category",
    valueYField: "value"
  }));

  let data = [{
    category: "Category 1",
    value: 10
  }, {
    category: "Category 2",
    value: 20
  }, {
    category: "Category 3",
    value: 15
  }];

  xAxis.data.setAll(data);
  series.data.setAll(data);

});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>