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]}**
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 wanted to use icons in my react-native app, so I installed react-native-elements. The Icons itself work but I have to add a property called tvParallaxProperties on the Icon element like that:
<Icon tvParallaxProperties={undefined} name={'up'} type="antdesign" />
I read the docs and google about that, but I cant find the use of that. Does anyone know why I need this property and whats the use of it?
If you don't want to write this option under all of the Icons there's 2 solutions.
First which I don't recommend if you are creating real project not for training purpose.
Install RN Elements bleeding Edge from docs and the newest BETA version (unstable).
Or which worked for me is change imports of Icons like:
import { Icon } from 'react-native-elements' to: import Icon from 'react-native-vector-icons/AntDesign';. The last element of import of course is your Icons package and you can change it fe. to: MaterialCommunityIcons
After adding this import you can delete option type: antdesign and this tvParallaxProperties={undefined}
Like docs says tvParallaxProperties are for (Apple TV only) Object with properties to control Apple TV parallax effects.
I have a problem adding the monitor_heart icon from material-design-icons/font to a react project. The icon is located here:
(https://marella.me/material-icons/demo/) you have to type "monitor_heart"
So far I added icons from material-ui without any problem unfortunately here I have a problem.
I have installed the package:
npm and #material-design-icons/svg
I imported the icon:
import monitor_heart from "#material-design-icons/svg/filled/monitor_heart.svg"
i add it to App:
div <monitor_heart /> /div //or {monitor_heart}
but it not work -I don't know how can I get to this specific icon and just execute it / show it on the screen. What I did it wrong? Can anyone help me?
code located here:
https://github.com/beginnerinreact/material-icon-problem
Ok now it works!
I had to add correct form of import:
import { ReactComponent as Monitor_heart } from "#material-design-icons/svg/outlined/monitor_heart.svg" where I have to stress that this is a React component
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