Questions on static mode

[lifeofzero]

I'm using Propel to build charts but in static mode. I have a few questions regarding propel static mode.

1. How to input multiple metric and dimension data in static mode.
2. How to change chart type dynamically like line/bar etc
3. Does static mode supports comparison data chart
   X axis: metric 1, metric 2, metric 3
   Y axis: dimension 1, dimension 2, dimension

Kindly provide a guide or sample app related to propel static mode if possible.
Thank you

Regards,
Goutam Joshi.

[felipecadavid]

How to input multiple metric and dimension data in static mode.

You can currently achieve this by using chartConfigProps, this prop will enable you to provide multiple datasets to the chart, here is an example using a TimeSeries line chart

<TimeSeries
  // provide `labels` and `values` as normal for the first dataset
  labels={[
    "2024-01-11T00:00:00Z",
    "2024-01-12T00:00:00Z",
    "2024-01-13T00:00:00Z",
    "2024-01-14T00:00:00Z",
    "2024-01-15T00:00:00Z",
    "2024-01-16T00:00:00Z",
    "2024-01-17T00:00:00Z",
    "2024-01-18T00:00:00Z",
  ]}
  values={["586", "515", "580", "730", "767", "100", "717", "805"]}
  variant="line"
  chartConfigProps={(config) => ({
    ...config,
    data: {
      ...config.data,
      datasets: [
        {
          ...config.data.datasets[0],
          tension: 0.1,
          borderColor: "#17B897",
          borderWidth: 2,
          pointStyle: false,
        }, 
        { // you can configure further datasets here, `data` would match the `values`
          ...config.data.datasets[1],
          data: [279, 257, 290, 365, 384, 450, 358, 402],
          labels: [
            "2024-01-11T00:00:00Z",
            "2024-01-12T00:00:00Z",
            "2024-01-13T00:00:00Z",
            "2024-01-14T00:00:00Z",
            "2024-01-15T00:00:00Z",
            "2024-01-16T00:00:00Z",
            "2024-01-17T00:00:00Z",
            "2024-01-18T00:00:00Z",
          ],
          tension: 0.1,
          borderColor: "#FF0000",
          borderWidth: 2,
          pointStyle: false,
        },
      ],
    },
  })}
/>

How to change chart type dynamically like line/bar etc

You can change chart types dynamically using state, you can try this by using our sample apps

Screen.Recording.2024-02-09.at.8.28.16.AM.mov

Does static mode supports comparison data chart
X axis: metric 1, metric 2, metric 3
Y axis: dimension 1, dimension 2, dimension

Currently you can make this using the Leaderboard component, similar to the TimeSeries, pass in the first dataset using rows and then you can use chartConfigProps to add further datasets

<Leaderboard
  headers={['header1', 'header2', 'header3']}
  rows={[
    ['row1', '100'],
    ['row3', '200'],
    ['row5', '300'],
  ]}
  variant="bar"
  chartConfigProps={(config) => ({
    ...config,
    data: {
      ...config.data,
      datasets: [
        {
          ...config.data.datasets[0],
          backgroundColor: '#17B897',
          borderColor: '#17B897',
          hoverBackgroundColor: '#17B897',
          hoverBorderColor: '#17B897',
        },
        {
          ...config.data.datasets[0],
          data: [150, 250, 350], // each value corresponds to the row
          backgroundColor: '#FF0000',
          hoverBackgroundColor: '#FF0000',
          hoverBorderColor: '#FF0000',
          barThickness: 15
        }
      ],
    },
    options: {
      ...config.options,
      indexAxis: 'x'
    }
  })}
/>

Kindly provide a guide or sample app related to propel static mode if possible.

You can use our sample apps in order to test static/connected mode components