React and react-chartjs-2, Line chart display data with string(text) - reactjs

I wanted to create a chart to display info/days. Where I wanted to display text onY-axis. I have created line using React.js. Currently I am able to display digit on Y-axis. However, is there a way to display string(text) on Y-axis?
In the link, the picture of the expamle what i want to do.
my expamle


I've spent a lot of time trying to implement chartjs to my project. But i had a lot of problems with customizations. As a result i've replaced chart library to victory And it will suite for all your cases. I recommend you to try it and don't waste your time on chartjs

Related

Render a custom label with background color in react-minimal-pie-chart (or any pie chart library)

I am trying to implement the following design:
However, I can't seem to find implementations of this kind of a background container anywhere in the React pie chart libraries I've found. I'm attempting to use react-minimal-pie-chart as they seemed to indicate the ability to render a React component as a custom label:
However, anything custom I do that isn't an svg element fails. Every example I've seen simply uses a <text> element and no background, and I'm not well-versed enough on svgs to see a parallel to divs with text inside. I see you can create a <rect> but not a way to plop some dynamic text inside.
Is there a way I'm missing to do this with this library? Or has anyone successfully implemented this with another pie chart library?

How to split screen inside of grid in reactJs

I'm using reactjs and I want to split my grid area in to 2 fields. I tried but couldn't find any better solution. Do anyone know how to do that?
Here is the image and it shows how do I want to make the divided components
this image showing area is also in a grid(half of the screen). If the question is not clear, please inform.

Get percentage of line bar chartjs

React ChartJS.
How can I make a chart like this? I have normal type Line bar but I want to get the percentage too.
Thanks.

How to match label values with chart line in react native and d3?

Hey guys I try to create my first chart using react native and d3 but two issues I found here. First is that while I am playing with cursor position in label is not equal with label. And second issue is that I want to match the graph with months behind scrolling both.
here I made a snack example
https://snack.expo.io/#zoolle/chart-with-d3
Any idea?

AngularJs ChartJs tooltip z-index issue

I am using this template https://coreui.io/v1/demo/pro/AngularJS_Demo/#!/dashboard for my angular project. In that it includes chart.js and angular-chart.js. After good amount of googling, I am still not able to get the tooltip in the chart above all element presents.
In all the other product of coreui it shows properly. But I am not sure why it not showing here. Please help me.

Looking at the source code, it seems they are using ChartJs for the charts.
ChartJS should automatically find the right position for your tooltips, but since the chart area is so small, the tooltip would look cut-off when it has a top position too. Try increasing the area around the chart to give the tooltip some more space. Because all the other examples in your dashboard have larger charts/containers, the problem happens only in the small boxes.
When you want to have some more power over the tooltip, you can also switch to HTML tooltips so the tooltip will be added outside of the canvas, and can be configured through CSS (like Z-index).

Resources