Has anyone gotten the X-range chart type to work on the new version of charts of Outsystems Charts? Currently we're using the V1 chart in combination with the HighChartJSON input to pass the config including data. However, when displayed together with a V2 chart, the X-range chart disappears.
X-range chart only:
When combined with a V2 chart:
As you can see, only the new chart renders. Interestingly, it is part of the DOM:
I'm using v3.6.1 of charts, and there is no specific CSS hiding the chart.
For this demo I used the Highchart demo code to render the X-range chart: https://www.highcharts.com/demo/highcharts/x-range.
I would love to upgrade that X-range chart to the new Chart version, but I haven't got it to work yet. Tried with the JS API (OutSystems.ChartAPI.Chart.GetById($parameters.ChartId).setProviderConfigs(JSON.stringify(chartDefaultConfig),false)), but that hasn't worked out for me yet...
Edit: Added oml for reference
Hi @Jan Wagenaar
A couple of things:
Something like this:
To achieve what you want without exploring all the extensibility actions (that would be the best way and the one that the product will always support) you can add the following Js Node to the initialize event handler:
const chartXrange = { chart: { type: 'xrange' }, title: { text: 'Highcharts X-range' }, accessibility: { point: { descriptionFormat: '{add index 1}. {yCategory}, {x:%A %e %B %Y} to {x2:%A %e %B %Y}.' } }, xAxis: { type: 'datetime' }, yAxis: { title: { text: '' }, categories: ['Prototyping', 'Development', 'Testing'], reversed: true }, series: [{ name: 'Project 1', borderColor: 'gray', pointWidth: 20, dataLabels: { enabled: true } }] } OutSystems.ChartAPI.Chart.GetById($parameters.ChartWidgetId).provider.update(chartXrange, true, true);
Here's the result (ofc it needs some fine-tunning but you'll get the idea):
Hope it helps.
Cheers,GM
Splendid! I was able to get it working :)
For the ones circling back later: in order to show data, we need to add the "data" attribute on series.