I'm using primereact and react-google-charts. However, they both want me to call the components as Charts. When I write a chart, I get an error. What solution should I follow?
(https://i.stack.imgur.com/4qGie.png)(https://i.stack.imgur.com/5dpNr.png)
I tried calling the components as chart VSCode gave an error. Then I tried as Gantt and got the above error
you can use import aliases
import {Chart as GoogleChart} from 'react-google-charts';
import {Chart as PrimeChart} from 'primereact';
now use GoogleChart and PrimeChart wherever you want
<GoogleChart />
<PrimeChart />
Related
I'm trying to get the values on each bar with the chartjs datalabels plugin.
So above the bar 'a' a want to see the number 30 and above or inside bar 'b' I want to see the number 50.
But it isn't showing any values at all.
Can anyone help and tell me what's wrong?
I've also tried to use different versions of chartjs but it didn't help.
Currently I'm using Chartjs 3.2.0
and for the chartjs-plugin-datalabels 2.0.0
here is an example in codesandbox
https://codesandbox.io/s/chart-js-plugin-5ez9p?file=/src/App.tsx
As per the documentation you still need to register the plugin before you can use it:
import {Chart} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.register(ChartDataLabels);
Working codesandbox: https://codesandbox.io/s/chart-js-plugin-forked-dig8k?file=/src/App.tsx
First you need to register the chartjs-plugin-datalabels plugin.
For Registration you can also add plugins props to your TsChart.
import ChartDataLabels from "chartjs-plugin-datalabels";
In TsChart tag add plugins props which accepts
Chart.PluginServiceRegistrationOptions[]
Eg. **TsChart type="bar" data={data} options={options} plugins={[ChartDataLabels]}**
Hi Have the following code in our react native application:
import { SvgCssUri } from 'react-native-svg';
<SvgCssUri style={styles.osIcon} uri={'https://mon.zappiehost.com/images/os/' + props.data.icon} />
I have even tried to use simple SvgUri (instead of SvgCssUri)
But the image still load with out some of the content (Blacks colors):
Also here is the original SVG image used: https://raw.githubusercontent.com/librenms/librenms/master/html/images/os/proxmox.svg
Turns out the blacks were missing due to the fact that React Native SVG didnt do auto fill.
adding fill={'black'} is what was needed into the <SvgUri> tag
At documentation I found that I can access chats.js object from import { Chart } from 'react-chartjs-2';
But at 2.9.0 version there is not Chart object
https://github.com/jerairrest/react-chartjs-2#chartjs-object
I want use Chart.pluginService.register
Since you install chart.js as a peer dependency with react-chartjs-2 you can simply use the object given by chart.js. Javascript objects work with references, so changing settings there will modify react-chartjs-2.
Example:
import Chart from 'chart.js';
Chart.pluginService.register(/* your plugin */);
Alternatively plugins can also be registered using the 'plugins' prop on the chart component you are using. for example:
totalizer is the custom plugin.(Reference: https://jsfiddle.net/simonbrunel/9ezggxx5/)
<Bar
data={ChartData}
options={newOptions}
plugins={[totalizer]}
/>
I'm trying to set the locale of Chart.js in a React application.
Method 1
Use the bundled Chart.js version, since I do not use moment in the rest of the app:
import Chart from 'chart.js/dist/Chart.bundle.min.js';
Problem: How can I set the locale? moment is not available as a global object, nor can I find it as a property of Chart or any of its instances, nor is there an API to modify the locale.
Method 2
Use the non bundled version and include moment myself.
import * as moment from 'moment';
import 'moment/locale/es';
import Chart from 'chart.js/dist/Chart.min.js';
Then in code before rendering the chart:
moment.locale('es');
chart = new Chart(type, options);
Problem: but this does throws an error:
Error: Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com
I have tried assigning moment to the local object as window.moment = moment but same error.
(Method) Hack 3
Just to test I copied moment.js and es.js files to public folder and included them as <script> tags in index.html and it worked, but I don't want a hack like that.
Notes
I know of some React libraries for Chart.js but do not want to use them.
I have read other post where they suggest reloading the chart if the locale was changed before it was rendered.
[https://stackoverflow.com/questions/38202587/chart-js-moment-locale][https://stackoverflow.com/questions/38202587/chart-js-moment-locale]
https://github.com/apertureless/vue-chartjs/issues/101
https://github.com/chartjs/Chart.js/issues/5284
https://github.com/chartjs/Chart.js/issues/2906
in Vue I tried whit.
import Moment from 'moment';
import 'moment/locale/es';
import Chart from 'chart.js';
Moment.locale('es');
it worked for me.
I was looking in the chart.js code ant I see, they call moment as Moment not moment
I am trying to plot a highmap in react using typescript. I have additionally loaded the highcharts types which include highmaps.
class InvestmentChart extends React.Component {
componentDidMount() {
Highcharts.mapChart("investment", {
chart: {
...
Cheers
See live here.
Based on the readme, it looks like you need to do:
import * as Highcharts from 'highcharts/highmaps';
instead of:
import * as Highcharts from 'highcharts';
I tried this in CodeSandbox and it seemed to get past the point where you were stuck.
Update
DefinitelyTyped appears to have some typings for Highmaps, though they are out of date. The following method of importing Highmaps seems to get as far as the previous method at runtime in CodeSandbox and will use the typings:
import * as Highcharts from "highcharts";
import MapFactory = require("highcharts/modules/map");
(MapFactory as any)(Highcharts);
New CodeSandbox. Locally, I am still getting a type error because of the out-of-date declarations (subtitle is not recognized), but you can //#ts-ignore it. I don't know why this error isn't appearing on CodeSandbox.