How to style an individual plot in a timeseries chart (FusionCharts/FusionTime)?

Question

I'm rendering a timeseries line graph using FusionCharts as follows:

const MyChart = () => {
    const schema = [
        {
            name: "Category",
            type: "string"
        },
        {
            name: "Time",
            type: "date",
            format: "%Y-%m-%d"
        },
        {
            name: "Value",
            type: "number"
        }
    ]

    const data = [
        ["CategoryToStyle", "2022-09-01", 5],
        ["CategoryToStyle", "2022-10-01", 10],
        ["Category2", "2022-09-01", 2],
        ["Category2", "2022-10-01", 7]
    ]

    const dataStore = new FusionCharts.DataStore().createDataTable(data, schema);

    const chartSettings = {
        type: "timeseries",
        dataSource: {
            data: dataStore,
            series: "Category",
            yAxis: {
                format: {
                    prefix: "$"
                }
            }
        }
    }

    return <ReactFC width={1024} height={1024} {...chartSettings} />
}

The chart renders 2 line plots, one for the "CategoryToStyle" series and one for "Category2" series.

How can I customize the "stroke-width" of the line plot for the series "CategoryToStyle"?

Answer 1

Style defined using plotConfig object are scoped to the entire chart, i.e., if you define a line plot and set the value of stroke-width to 4, all the line plots in the chart will have stroke width set to 4 pixels.

 {
  "plotConfig": {
    "style": {
      "area": {
        "line": {
          "opacity": 1.0
        },
        "area": {
          "opacity": 0.3
        },
        "anchor": {
          "opacity": 0.7
        }
      }
    }
  }
}

To know more about this feature please refer - https://www.fusioncharts.com/dev/fusiontime/fusiontime-component/plot-types-in-fusiontime#plot-configuration