Im trying to use the pattern-fill module from highcharts to change my column charts to show a pattern instead of a solid color, but i cant find the module in the HighchartModules static entity. Is there a native way to do so or any workaround?I want a behaviour like in this demo from the Highcharts documentation:https://www.highcharts.com/samples/highcharts/series/pattern-fill-pie?jsfiddle
Hi Nikolas, You can download the JS file for the pattern-fill feature from the Highcharts docs here: https://www.highcharts.com/docs/chart-design-and-style/pattern-fills ( Direct link: https://code.highcharts.com/modules/pattern-fill.js ) To use it, I imported the script and then set it as required in the screen and then set the pattern fill in the OnInitialize event of the chart using this JavaScript:
const chartPlotOptions = {
plotOptions: {
area: {
fillColor: {
pattern: {
// Define the hatch lines
path: {
d: 'M 0 0 L 6 6',
strokeWidth: 2,
stroke: '#4263EB'
},
width: 8,
height: 8,
backgroundColor: '#2BC0E4'
}
};
OutSystems.ChartAPI.Chart.SetProviderConfigs(
$parameters.ChartWidgetId,
JSON.stringify(chartPlotOptions)
); I’ve also attached a sample you can check out. Result:
@Nickolas Barbosa please follow the approach mentioned by @Mihai Melencu, but keep two things in mind. This will be unsupported code, and for maintenance, you need to make sure that every time you update OutSystems Charts, you will be updating the script for the same version of HighCharts, since you might start having unwanted behaviours if that doesn't happen.
Thanks for the help!