LineChart/BarChart widget not displaying

Widgets
1

Hi,

I am trying to implement a chart, but I have problems with getting it to display. It is just not showing up.
My component is very simple:

...
import { LineChart } from "@com.mgmtp.a12.widgets/widgets-core/lib/chart/line-chart/main/line-chart.view";


const DATA = [
	{ name: "A", desktop: 170, laptop: 30, tablet: 5, mobile: 25 },
	{ name: "B", desktop: 150, laptop: 75, tablet: 10, mobile: 30 },
	{ name: "C", desktop: 140, laptop: 88, tablet: 20, mobile: 50 },
	{ name: "D", desktop: 125, laptop: 112, tablet: 24, mobile: 72 },
	{ name: "E", desktop: 100, laptop: 150, tablet: 30, mobile: 120 },
	{ name: "F", desktop: 70, laptop: 165, tablet: 45, mobile: 180 },
	{ name: "G", desktop: 50, laptop: 180, tablet: 63, mobile: 200 }
];

const LINE_PROPS_MAP = {
	desktop: {
		dataKey: "desktop",
		stroke: "#0088FE",
		strokeWidth: 2
	},
	laptop: {
		dataKey: "laptop",
		stroke: "#00C49F",
		strokeWidth: 2
	},
	tablet: {
		dataKey: "tablet",
		stroke: "#FFBB28",
		strokeWidth: 2
	},
	mobile: {
		dataKey: "mobile",
		stroke: "#FF8042",
		strokeWidth: 2
	}
};

export const ChartComponent: FC = () => {
  return (
    <>
      <div>Some content</div>
      <LineChart
        data={DATA}
        xAxisProps={{ dataKey: "name" }}
        xAxisLabel="Name"
        yAxisLabel="Value"
        linePropsMap={LINE_PROPS_MAP}
      />
    </>
  );
}

This is basically the example code from the widget showcase.

In other situations, I could solve problems of widgets not showing up by changing the import of widgets from e.g.
import { LineChart } from "@com.mgmtp.a12.widgets/widgets-core";
to
import { LineChart } from "@com.mgmtp.a12.widgets/widgets-core/lib/chart/line-chart/main/line-chart.view";
But in this case, it doesn’t change anything.

Also, I couldn’t find any way to know how the component StyledResponsiveChartContainer (from the example code) is implemented.

Any hints?

2

hi Felix,
Please wrap your LineChart with a ResponsiveChartContainer like this:

import { ResponsiveChartContainer, LineChart } from "@com.mgmtp.a12.widgets/widgets-core/lib/chart";

//...
return (
 <>
      <div>Some content</div>
      <ResponsiveChartContainer>
            <LineChart
              data={DATA}
              xAxisProps={{ dataKey: "name" }}
              xAxisLabel="Name"
              yAxisLabel="Value"
              linePropsMap={LINE_PROPS_MAP}
            />
      </ResponsiveChartContainer>
    </>
)

about the StyledResponsiveChartContainer, it is simply a styled component that adds styling for the ResponsiveChartContainer, there is no further customization in it :wink: We’ll upgrade our showcase soon.

Happy coding,
Hieu