{import * from CURL.GUI.CHARTS}
{import * from CHARTS-DOC,
    location = "../docstring-support/gui/charts-doc.scurl"
}

{let left-group:ShapeGroup =
    {ShapeGroup
        color = FillPattern.black
    }
}

{let right-group:ShapeGroup =
    {ShapeGroup
        color = FillPattern.black
    }
}

{LayeredChart
    width = 15cm,
    height = 7cm,
    left-axis =
        {ChartAxis
            {ChartDataSeries sample-records, "Age"},
            axis-group = left-group
        },
    right-axis =
        {ChartAxis
            {ChartDataSeries sample-records, "Wins"},
            axis-group = right-group
        },
    {LineLayer
        sample-records,
        "Age",
        "Wins",
        x-axis-data =
            {ChartDataSeries sample-records, "Name"},
        stroke-thickness = 2pt,
        {on ChartLayoutChanged at layer:LineLayer do
            || Assume that there are two data
            || series, and that they correspond
            || to the left and right axes,
            || respectively.
            {layer.series-shapes[0].add-event-handler
                {on PointerEnter do
                    set left-group.color = FillPattern.red
                }
            }
            {layer.series-shapes[0].add-event-handler
                {on PointerLeave do
                    set left-group.color = FillPattern.black
                }
            }
            {layer.series-shapes[1].add-event-handler
                {on PointerEnter do
                    set right-group.color = FillPattern.red
                }
            }
            {layer.series-shapes[1].add-event-handler
                {on PointerLeave do
                    set right-group.color = FillPattern.black
                }
            }
        }
    }
}