How to use @carbon/charts - 5 common examples

To help you get started, we’ve selected a few @carbon/charts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github carbon-design-system / carbon-charts / packages / angular / src / bar-chart.component.ts View on Github external
ngAfterViewInit() {
		this.chart = new BarChart(
			this.chartRef.nativeElement,
			{
				data: this.data,
				options: this.options
			}
		);

		Object.assign(this, this.chart);
	}
}
github carbon-design-system / carbon-charts / packages / react / src / bar-chart.js View on Github external
componentDidMount() {
		this.chart = new BC(
			this.chartRef,
			{
				data: this.props.data,
				options: this.props.options
			}
		);
	}
github carbon-design-system / carbon-website / src / pages / data-visualization / charts / data / demo-chart-data.js View on Github external
450000,
        300000,
        70000,
        20000,
        120000,
      ],
    },
  ],
};

export const demoDonutOptions = {
  accessibility: false,
  legendClickable: true,
  containerResizable: true,
  colors,
  center: new DonutCenter({
    number: 25423,
    label: 'Browsers',
  }),
};
github carbon-design-system / carbon-website / src / data / charts / demo-chart-data.js View on Github external
450000,
        300000,
        70000,
        20000,
        120000,
      ],
    },
  ],
};

export const demoDonutOptions = {
  accessibility: false,
  legendClickable: true,
  containerResizable: true,
  defaultColors,
  center: new DonutCenter({
    number: 25423,
    label: 'Browsers',
  }),
};

export const scatterData = {
  labels: ['Qty', 'More', 'Sold', 'Restocking', 'Misc'],
  datasets: [
    {
      label: 'Dataset 1',
      backgroundColors: [defaultColors[0]],
      data: [32100, 23500, 53100, 42300, 12300],
    },
    {
      label: 'Dataset 2',
      backgroundColors: [defaultColors[1]],
github carbon-design-system / carbon-charts / packages / vue / src / ccv-grouped-bar-chart.vue View on Github external
mounted() {
		this.coreChart = new GroupedBarChart(this.$el, {
			data: this.data,
			options: this.options,
		});
	},
};

@carbon/charts

Carbon Charts component library

Apache-2.0
Latest version published 20 hours ago

Package Health Score

90 / 100
Full package analysis