You need to use plotly styling
https://plotly.com/javascript/axes/
For the chart, use
{
"yaxis2": {
"overlaying": "y",
"side": "right"
}
}
For the series, use
{
"yaxis": "y2"
}
Hi Avanti,
You would need to use the AnyChart widget. See this documentation of plotly: Multiple axes in JavaScript (plotly.com)
The downside of this is you would need to build the strings for your graphs (at least, I haven’t found an easy way to resolve it)
EDIT:
If you are confused as to how to use the AnyChart widget (I know I struggled a bit), create a non-persistable entity containing 2 unlimited string parameters – one is for your data and one is for your layout options (below is an example with default values for testing purposes)
Using the above-mentioned documentation as example, in the LayoutConfiguration you would add:
{
"yaxis": {
"title": "yaxis title"
},
"yaxis2": {
"title": "yaxis2 title",
"titlefont": {
"color": "rgb(148, 103, 189)"
},
"tickfont": {
"color": "rgb(148, 103, 189)"
},
"overlaying": "y",
"side": "right"
}
}
Drop the AnyChart widget in a dataview that contains the non-persistable entity (with the data already populated :D). Under the Data-tab, select the relevant source attribute (also ensure the Mode is set to Production, the Development mode gave us issues). Under the Layout-options select the relevant source attribute and you should be good to go!
I hoped it helped and all the best!
Hi Nico Mouton,
i have created non persitent entity in which i added two ttribute Data and layout configuration.but second is not showing on graph only single y axis is shwing on graph .can you please did i did something wrong
n{
"yaxis": {
"title": "yaxis title"
},
"yaxis2": {
"title": "yaxis2 title",
"titlefont": {
"color": "rgb(148, 103, 189)"
},
"tickfont": {
"color": "rgb(148, 103, 189)"
},
"overlaying": "y",
"side": "right"
}
}
[
{
"x":[
"100",
"200",
"300"
],
"y":[
"20",
"30",
"40"],
"type":"bar"
},
{
"x":[
"100",
"200",
"300"
],
"y":[
"200",
"3000",
"4000"],
"type":"scatter",
"mode":"lines"
}
]