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
Related
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 />
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]}**
I tried to understand how to use toast, but I couldn't and that's why I'm looking for help here.
Is there a reason why to use react-bootstrap over regular bootstrap? I start to think that I cannot use all functionalities from regular bootstrap in react
You can use all the plain bootstrap utilities in React, but it is not reccomended.
This is because to enable interactive functionality, Bootstrap uses JQuery and other DOM-altering Javascript, which doesn't always play that well with React, which likes to "own" the DOM and any alterations.
If you check out the Usage section of the Bootstrap Toasts docs (here), you can see that it toasts need to be initialised with Jquery/JS:
Initialize toasts via JavaScript:
$('.toast').toast(option)
This can be messy to place within React, there are ways of calling it inside a useEffect() block but I've had trouble with similar things in the past.
This is why react-bootstrap is great, it can give you pre-made components with all this functionality baked in, which you can just drop into your codebase.
See the react-bootstrap docs for toasts here, fullly funcitonal toasts can be added with just:
<Toast>
<Toast.Header>
<strong className="mr-auto">Bootstrap</strong>
</Toast.Header>
<Toast.Body>Hello, world! This is a toast message.</Toast.Body>
</Toast>
It depends on which version of Bootstrap you're using. Bootstrap 5 no longer uses jQuery so Bootstrap components like the Toast can be used without the need for a 3rd party library like react-bootstrap or reactstrap.
First import the desired components...
import { Toast } from 'bootstrap';
Then, instantiate and use as needed...
const { Toast } = bootstrap;
var toastEl = document.getElementById('myToast');
const bsToast = new Toast(toastEl);
bsToast.show();
Bootstrap 5 Toast with React
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 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.