Skip to content

LineChart

Andrew Sutton edited this page Oct 16, 2025 · 1 revision
image
let lineChartPoints = [
    chart.chartTitle "Line Chart"
    chart.lineChartData [
        [
            lineChartPoints.data [
                [ lineChartDataPoint.x (DateOnly.Parse "2018/01/06"); lineChartDataPoint.y 10; lineChartDataPoint.xAxisCalloutData "Appointment 1" ]
                [ lineChartDataPoint.x (DateOnly.Parse "2018/01/16"); lineChartDataPoint.y 18; lineChartDataPoint.xAxisCalloutData "Appointment 2" ]
                [ lineChartDataPoint.x (DateOnly.Parse "2018/01/20"); lineChartDataPoint.y 24; lineChartDataPoint.xAxisCalloutData "Appointment 3" ]
                [ lineChartDataPoint.x (DateOnly.Parse "2018/01/24"); lineChartDataPoint.y 35; lineChartDataPoint.xAxisCalloutData "Appointment 4" ]
                [ lineChartDataPoint.x (DateOnly.Parse "2018/01/26"); lineChartDataPoint.y 35; lineChartDataPoint.xAxisCalloutData "Appointment 5" ]
                [ lineChartDataPoint.x (DateOnly.Parse "2018/01/29"); lineChartDataPoint.y 90; lineChartDataPoint.xAxisCalloutData "Appointment 6" ]
            ]
            lineChartPoints.legend "first legend"
            lineChartPoints.lineOptions [
                lineChartLineOptions.lineBorderWidth "4"
            ]
            lineChartPoints.color Fui.dataVizPalette.color10
        ]
    ]
]

Fui.lineChart [
    lineChart.data lineChartPoints
    lineChart.strokeWidth 6
    lineChart.yMaxValue 90
    lineChart.showXAxisLablesTooltip true
    lineChart.height 400
    lineChart.width 400
    lineChart.tickFormat "%m/%d"
    lineChart.tickValues [
        DateOnly.Parse "2018-01-01"
        DateOnly.Parse "2018-02-09"
    ]
    lineChart.enablePerfOptimization true
]
Clone this wiki locally