2

enter image description here

I am using am5 charts, I want to display 10 labels on the Y axis starting from 0. I have followed the documentation but was unable to find any configuration option to change it. I tried everything but was unable to figure it out. Is there a resource or configuration I can change to make it work?

Here is my code in javascript. Please have a look.

var root = am5.Root.new("chartdiv");
root.setThemes([
  am5themes_Animated.new(root)
]);

var chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    panY: false,
    wheelY: "zoomX",
    layout: root.verticalLayout
  })
);

// Define data
var data = [{
  date: new Date(2021, 0, 1).getTime(),
  value: 1000
}, {
  date: new Date(2021, 0, 2).getTime(),
  value: 800
}, {
  date: new Date(2021, 0, 3).getTime()
  // value is missing
}, {
  date: new Date(2021, 0, 4).getTime(),
  value: 1200
}, {
  date: new Date(2021, 0, 5).getTime(),
  value: 740
}];

// Craete Y-axis
var yAxis = chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

// Create X-Axis
var xAxis = chart.xAxes.push(
  am5xy.DateAxis.new(root, {
    baseInterval: {
      timeUnit: "day",
      count: 1
    },
    renderer: am5xy.AxisRendererX.new(root, {
      minGridDistance: 20
    }),
  })
);

// Create series
function createSeries(name, field) {
  var series = chart.series.push(
    am5xy.LineSeries.new(root, {
      name: name,
      xAxis: xAxis,
      yAxis: yAxis,
      valueYField: field,
      valueXField: "date",
      connect: false
    })
  );
  series.strokes.template.setAll({
    strokeWidth: 3
  });
  series.fills.template.setAll({
    fillOpacity: 0.5,
    visible: true
  });
  series.data.setAll(data);
}

createSeries("Series with breaks", "value");

0 Answers0