News Articles charts

How to change cursor on hover of data labels in chart.js version 3?

I’ve been trying to change the mouse cursor to ‘pointer’ as soon as it is hovered on the data label. I’m effectively able to achive this effect while hovering over data-points, so that is fine. options: { onHover: (eve, legendItems, chartElement) => { if (_.get(eve, ‘native.target.style’)) { eve.native.target.style.cursor = legendItems[0] ? ‘pointer’ : ‘default’; } […]

Dates repeating in Google line chart

I’d like to create a Google line chart drawing (for stocks data) that will have data points for every market year. But I only want the years to appear once. Like this: correct But when I try, I get a result with repeating years like this: incorrect Finally, here’s a look at how I’m loading […]

I want to remove the commas from the X axis with d3, but tickFormat does not work and instead, throws an error

I am making a bar chart with the years on the X axis. Currently trying to remove the commas using, tickFormat() but it throws an error. Uncaught (in promise) TypeError: svg.append(…).attr(…).attr(…).classed(…).call(…).tickFormat is not a function at Does anyone know what is wrong? My code: let dataNumsOnly = []; let labels = []; fetch(‘https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json’) .then(response => […]

Chart js not showing dotted x and y base axis

Currently on version 2.9.4 I managed to set dotted lines on the axis but there’s still a normal line on the axis Y and the X base axis.} So what gridLines object and borderDash does is adding the effect of dotts, but still we can see that there is a line on the Y axis. […]

Is there any possible way to place two color instead of using min max because we need pair of colors like blue red, am using armchart5. thanks in advn

series.set("heatRules", [{ target: series.columns.template, dataField: "valueY", min:am5.color(0xff5050), this is min max:am5.color(0x0000ff), this is max key: "fill", }]); I need two colors because min-max were using in-between colors also which means based on the range color should change Source: JavaSript – Stack Overflow

How to modify bar width of google chart column?

How I can modify the size of bar width of google chart column? I tried to add ‘bar: { groupWidth: "20%" }’ but it does nothing to the chart. Here is the code that I want to use from google chart: <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load(‘current’, {‘packages’:[‘bar’]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var […]

Implementing 3D Charts In Angular Application.

Implementing 3D Charts In Angular Application There are several libraries that can help us in creating 3D charts, such as Plotly.js, ZingChart, also we can use Three.js or a combination of d3 and x3dom libraries, but it is going to be a bit complicated. Here I would like to show how to make 3D charts […]

How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js

I am making a chart using chart.js in react environment. If you look at the second image, what if there is 130% along the Horizontal Line? 100 is formed with gray and above 100 green. I also want to make it in the same format as above. I’ve been looking for it for 2 days, […]

Google Visualization/Charts JS library (TimeLine): DataTable limitations

I’m using Google’s Visualization JS library, with the Timeline chart type. I have a Timeline chart built, and working. It has 5 data columns in it. I wanted to add in a new data column, so that I could tag each row with a database ID for that record. I want to make the chart […]

Make time as label for Chart.js

This is my first time working with Chart.js in order to make a chart for my data. I am looking to make a chart from some specific data from my database which I have exported in an array during the processing in php. However I feel kinda lost. So to be more specific: I have […]

Chart.js – graph responsivity / sizing

I’m facing a problem with a chart responsivity. I use chart.js (version 3.6.0) for creating charts. Here is my code: panel.html <div class="container"> <div class="chart-canvas"> <canvas id="memberCount" width="auto" height="80px"></canvas> </div> </div> panel.css .container { border-radius: 6px; background-color: rgb(47,59,82); width: 80%; display: inline-flex; margin: 32px 12px 32px 12px; flex-direction: column; flex-wrap: wrap; } .chart-canvas { padding: […]

How can I input text and move them freely using react js

I want to input text in chart(I used ECharts library) and can move the text around chart freely by using React js, how can I do? Source: JavaSript – Stack Overflow

Y-axis labels remain the same when zooming X-axis

I have made a line chart using react-chartjs-2. With the aid of the chartjs-plugin-zoom, I am able to zoom the X-axis of the line chart. However, whenever zooming the X-axis, the labels of the Y-axis changes accordingly. Y-axis is always adjusted to the for the Max Y-value. Is there a way to make the Y-axis […]

Chart.js change hover text

When I hover over the data point, that is in march and has a value of 15, it says january 15 instead of march 15, but it’s at the correct location. Is there anyway to fix this? <!DOCTYPE html> <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:700px"></canvas> <script> var xyValues = [ {x:"March", y:15}, ]; new […]

React Apex Charts – Reversed yAxis issue

I work on a graphs project and use Apex Charts. As I use days on y axis, I would like to have days from Monday on top and Sunday a the bottom. The issue is when I use y axis "reversed: true" it compact the graph… Don’t know why and I have no clue about […]

chart js height 100%

I have a problem with the height of the graph, I cannot set the height to 100%, find the image of my two graphs below here are the options of the graph type: ‘horizontalBar’, data: chartdata, options:{ responsive: true, maintainAspectRatio: true, aspectRatio: 1, animation: false, scaleSteps: 10, legend:{ display: false, }, showAllTooltips: true, tooltips:{ enabled: […]

how to display two chart lines in the same day in chart.js

Hi there to all of you, I have used Chart.js in my project and momentally I need to display the chart for one month. For example on 1st of November I need to display the total number of workers and the total number of workers present. How is that possible using Chart.js (I can’t change […]

Chart.JS Get the Y Axis value based on the X axis value

Need some guidance. I have a chart which is displaying tide times throughout the day. What I need to do is mark on the curve the height (Y Axis) based on the current time of day: e.g. If the time was 14:00 Here is my code: const chart = new Chart(this.$refs.myChart, { type: "line", data: […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.