Chart is invisble about amcharts5

[nseb]

@martynasma , I found the problem for the graph invisible in case CategoryAxis , we need add : xAxis.data.setAll(data);
for the probleme scrollbarX , you are right, I am making the modification

[martynasma]

The code looks good at first glance. Can you also post your data?

[nseb]

@martynasma , simpe data:
series.data.setAll([
{label : "t1" , value : 10 },
{label : "t2" , value : 11 }
]);

I try with beta 7 , same issue

[nseb]

Replace:
valueXField: 'label' by valueXField: 'date', try datas retrieve for your doc site :
series.data.pushAll([{
date: new Date(2021, 0, 1).getTime(),
value: 1000
}, {
date: new Date(2021, 0, 2).getTime(),
value: 800
}, {
date: new Date(2021, 0, 4).getTime(),
value: 800
}, {
date: new Date(2021, 0, 5).getTime(),
value: 800
}]);

It's works  , but poor quality and no preview in zoom bar

[martynasma]

You have two ValueAxis and data that is supplying strings. You should probably use CategoryAxis.

For how to configure XYChartScrollbar refer to this doc:
https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/#Scrollbar_with_chart_preview

[nseb]

@martynasma see the first code, I had configured scrollbar with preview.
New code , same issue:

let root = am5.Root.new('linechartdiv');

root.setThemes([
  am5themes_Animated.new(root)
]);

let chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    panX: true,
    wheelable : false,
    wheelX : 'none',
    wheelY : 'none'
  })
)
// Add data
const data = this.resultData.results
  ? this.resultData.results.map(item => ({label: ` (${item.identifier})`, value: item.value})) : []


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

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

// Create series
let series = chart.series.push(
  am5xy.SmoothedXLineSeries.new(root, {
    name : 'Results',
    valueYField: 'value',
    categoryXField : 'label',
    xAxis : xAxis,
    yAxis : valueAxis
  }));
series.strokes.template.setAll({
  strokeWidth: 2
});

console.table(data);


const cursor = chart.set("cursor", am5xy.XYCursor.new(root, { behavior: "zoomX" }));
cursor.lineY.set("visible", false);


let scrollbarX = am5xy.XYChartScrollbar.new(root, {
  orientation: "horizontal",
  height: 50,
});
chart.set("scrollbarX", scrollbarX)

series.data.setAll(data);

series.appear();
chart.appear();

[martynasma]

I don't see any series being added to the scrollbarX. You might've missed that part in docs:

https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/#Scrollbar_with_chart_preview

[nseb]

I have a test working ;-)

We have small issues with horizontal preview, when I drag the button ,pointer mouse is staggered.
It's possible to set font-family in chart to to have a smoother rendering

[martynasma]

Let's keep this place clutter-free, both for our own sake and the other's. If you have other questions, not directly related to original topic, please post a separate issue.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[sassomedia]

@martynasma Looks like the bot has some issues, there's a bunch of stale posts that it didn't close.