Possible to combine bar and line in same chart?

[jannejava]

Question

Is it possible to combine bars and a line in the same chart. Eg I would like to show energy consumption as bars for each day and at the same time show temperatures as a line. In this way to can see if there is a correlation.

Background Info/Attempts

Tried bar groups and also adding line to chartesian chart with no luck.

Scanned the internet and documentation for examples too.

Thanks in advance!

[zibs]

Hey @jannejava -- yes this should be possible if I understand you correctly. Below is a quick test I spun up using the example app inside this repo. You can provide multiple yKeys as your data to show different values if needed.

{({ points, chartBounds }) => (
            <>
              <Bar
                points={points.sales}
                chartBounds={chartBounds}
                animate={{ type: "spring" }}
              />
              <Line
                points={points.sales}
                curveType={curveType}
                color={colors.stroke!}
                strokeWidth={strokeWidth}
                animate={{ type: "spring" }}
              />
              <Scatter
                radius={scatterRadius}
                points={points.sales}
                animate={{ type: "spring" }}
                color={colors.scatter!}
              />
            </>
          )}

[jannejava]

Thanks for the clarification, I got it!

Just a quick question. Can you have multiple y-axis with different scales if there is a significant difference in value ranges? For example if bars is between 0-150 and outside temperature (line) is between -15-20 degrees.

[zibs]

I don't think we support multiple y-axes yet sorry! Feel free to make an issue requesting that and I can tag it as an enhancement/see where it fits on the roadmap.

[zibs]

Closing since we addressed the initial issue!