Arantiryo Github contribution chart
Arantiryo Github Stats
Arantiryo Most Used Languages

Activity

28 Sep 2022

Issue Comment

Arantiryo

Chartist graphs get re-drawn everytime I click on any button or resize window

I am using reactjs and this is how I am creating and displaying the chartist graphs :

 const dailyComplaintsChart = {
        data: {
            labels: ["M", "T", "W", "T", "F", "S", "S"],
            series: [whichType.seriesDaily]
        },
        options: {
            lineSmooth: Chartist.Interpolation.cardinal({
                tension: 0
            }),
            low: 0,
            high: highestValue.highestValueDaily, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
            chartPadding: {
                top: 0,
                right: 0,
                bottom: 0,
                left: 0
            }
        },
        // for animation
        animation: {
            draw: function (data) {
                if (data.type === "line" || data.type === "area") {
                    data.element.animate({
                        d: {
                            begin: 600,
                            dur: 700,
                            from: data.path
                                .clone()
                                .scale(1, 0)
                                .translate(0, data.chartRect.height())
                                .stringify(),
                            to: data.path.clone().stringify(),
                            easing: Chartist.Svg.Easing.easeOutQuint
                        }
                    });
                } else if (data.type === "point") {
                    data.element.animate({
                        opacity: {
                            begin: (data.index + 1) * delays,
                            dur: durations,
                            from: 0,
                            to: 1,
                            easing: "ease"
                        }
                    });
                }
            }
        }
    };

return(
 <div className="daily-graph">

                <ChartistGraph
                    className="ct-chart-background-daily-complaints"
                    data={dailyComplaintsChart.data}
                    type="Line"
                    options={dailyComplaintsChart.options}
                    listener={dailyComplaintsChart.animation}
                />
                <div className={classes.line}>
                    <p>Daily Complaints</p>
                </div>

            </div>
) 

Can anyone please help me out with this? Thanks

Forked On 28 Sep 2022 at 06:49:27

Arantiryo

Hi @m6265m 👋

If the issue's still relevant could you please provide a minimal reproduction so it would be easier to debug? Thanks!

Commented On 28 Sep 2022 at 06:49:27
Issue Comment

Arantiryo

How to add color and its label on side with chart.

Can we do something line this. Both number and percentage inside and labels outside, image

Forked On 28 Sep 2022 at 06:30:37

Arantiryo

Hi @MuzaffarMahmood 👋

Absolutely! You can use labelInterpolationFnc function to modify labels inside chart (here's an example) and create your own legend outside the chart.

Commented On 28 Sep 2022 at 06:30:37
Issue Comment

Arantiryo

Uncaught ReferenceError: Chartist is not defined

Requiring from npm. Using with webpack. Receives "Uncaught ReferenceError: Chartist is not defined"

Trying with

require('chartist')
new Chartist.Line('.ct-chart', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3],
    [1, 3, 4, 5, 6]
  ]
}, {
  fullWidth: true,
  chartPadding: {
    right: 40
  }
}); 

Trying also with import. Same result.

Forked On 28 Sep 2022 at 06:22:11

Arantiryo

Chartist supports ESM now, you can find the migration guide in the README.

Commented On 28 Sep 2022 at 06:22:11
Issue Comment

Arantiryo

fix: SvgPath.parse fails on negative values

Implements suggested fix from #1248.

Forked On 26 Sep 2022 at 01:49:54

Arantiryo

Hi @gionkunz! Yes, absolutely! Do you think that covers it or should I add anything else?

Commented On 26 Sep 2022 at 01:49:54

Arantiryo

test: add test with negative values

Pushed On 26 Sep 2022 at 01:44:34

Arantiryo

fix: SvgPath.parse fails on negative values

Created On 25 Sep 2022 at 08:54:56
Create Branch
Arantiryo In Arantiryo/chartist Create BranchSvgPath-parse-fail-on-neg-numbers

Arantiryo

Simple responsive charts

On 25 Sep 2022 at 08:53:01

Arantiryo

ci: remove compat mode (#1358)

Pushed On 25 Sep 2022 at 08:46:57

Arantiryo

fix: label position fix (#1357)

fixes #1266

Pushed On 25 Sep 2022 at 08:46:57

Arantiryo

fix: B and I series have the same color value (#1356)

Pushed On 25 Sep 2022 at 08:46:57

Arantiryo

chore(release): 1.1.3

Pushed On 25 Sep 2022 at 08:46:57
Issue Comment

Arantiryo

Invalid position AxisY

Hi Why AxisY is invalid position in my chart? I attached picture I set low range to -30 but in chart shows -50 https://imgur.com/Y98jkuK

Also the zero number must be near line but it is in the middle of two lines

Thanks

Forked On 25 Sep 2022 at 07:59:54

Arantiryo

Hi @iranapporg 👋

Is the issue still relevant for you with the latest version?

Commented On 25 Sep 2022 at 07:59:54
Issue Comment

Arantiryo

classnames inversion issue

Hi,

I'm having the following issue trying to specify the classnames of my series in a bar chart. It seems these classnames are assigned to the wrong series. Any advice on why this happens to me?

Here is the code by which I create the two series specifying 'last' and 'forecast' as classnames: image

Here are the elements I obtain on my page: image

It seems the series classnames have been inverted.

Forked On 19 Sep 2022 at 01:12:15

Arantiryo

Thank you for the reply!

Looks like it's still there, I was able to reproduce it in this code sandbox. We'll definetly take a stab at resolving the issue : )

Commented On 19 Sep 2022 at 01:12:15
Issue Comment

Arantiryo

classnames inversion issue

Hi,

I'm having the following issue trying to specify the classnames of my series in a bar chart. It seems these classnames are assigned to the wrong series. Any advice on why this happens to me?

Here is the code by which I create the two series specifying 'last' and 'forecast' as classnames: image

Here are the elements I obtain on my page: image

It seems the series classnames have been inverted.

Forked On 19 Sep 2022 at 12:49:18

Arantiryo

Hi @JCL2 👋

Is the issue still relevant for you?

Commented On 19 Sep 2022 at 12:49:18
Issue Comment

Arantiryo

Label does not start at first

Hi I have a problem with chartist labels see this image first: see this image first

As you see my labels don't start at 0 it starts at 1. WHY?

my code:

var chart = new Chartist.Line('#smil-animations', { labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"], series: [ [30, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6, 12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6, 4, 14, 5, 3, 10, 7, 12] ], }, { low: 0, plugins: [Chartist.plugins.tooltip()] });

Forked On 19 Sep 2022 at 12:40:45

Arantiryo

Hi @mrmmg 👋

Is the issue still relevant for you with the lastest version (v1.1.2)?

Commented On 19 Sep 2022 at 12:40:45
Issue Comment

Arantiryo

Horizontal bar divisor seems not working

Hello,

I'm having a problem with horizontal bar graphs. Indeed, I try to have custom graduations (in this case, 6, which are [0,20,40,60,80,100]). However, it seems that the divider attribute doesn't work, as you can see here: https://jsfiddle.net/morbakos/wvzL6gf4/

Thank you in advance for your response

Forked On 19 Sep 2022 at 12:40:09

Arantiryo

Hi @Morbakos 👋

Is the issue still relevant for you with the lastest version (v1.1.2)?

Commented On 19 Sep 2022 at 12:40:09
Issue Comment

Arantiryo

Multi-line chart click events and sharp edges

Hi I am using chartist-js multi-line chart. For me, the edges of the data points in the graph are not sharp. Is it possible to do that? Also, can we give click events to data points?

Forked On 19 Sep 2022 at 12:27:07

Arantiryo

Hi @sabithapopuri 👋

By listening for draw events that get emitted by the Chartist chart (example) we can put click events on points when they are being created.

Commented On 19 Sep 2022 at 12:27:07
Issue Comment

Arantiryo

Linear Regression / Trendline Support?

i build this scatter graph chart with chartist: image now i would like to show a linear trend line like: image

anyone have an idea how to achieve this? my code for the points is based on this syntax: {x:1602827212, y:43.9582}

Forked On 19 Sep 2022 at 12:21:23

Arantiryo

Unfortunately multitype charts are not supported as of right now.

Commented On 19 Sep 2022 at 12:21:23
Issue Comment

Arantiryo

Are there any actively maintained forks?

Unfortunately, the original maintainer appears to be MIA for many years now. Does anyone know of any actively maintained forks?

Forked On 19 Sep 2022 at 12:16:49

Arantiryo

This library is being actively maintained again and a major version v1.0.0 was recently released. Please feel free to check it out : )

Commented On 19 Sep 2022 at 12:16:49

Arantiryo

Implement HTML Legeng plugin with react-chartjs-2 v4

Would you like to work on a fix?

  • [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Hi guys, I would like to implement HTML Legeng plugin with react-chartjs-2 in its version 4. What I would like to have is legends looking like this Screenshot 2022-08-26 at 08 55 14 possible using charts library (look this pen ) : https://codepen.io/udarakasun/pen/QYLgeM

I used this example that's already in the documentation on Chartjs.org

https://www.chartjs.org/docs/3.9.1/samples/legend/html.html

and this how I have imported charts and instances:

import {
  ArcElement,
  Chart as ChartJS,
  Legend as ChartjsLegend,
  Tooltip,
  TooltipItem,
  TooltipModel,
} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { Doughnut } from 'react-chartjs-2'; 

this is how my doughnut component is implemented:

const renderDoughnut = useCallback(() => {
    const doughnutSize = 300;
    return (
      <Doughnut
        data={{
          labels,
          datasets: [
            {
              hoverOffset: 6,
              data,
              backgroundColor: colors,
              datalabels: {
                anchor: 'center',
                backgroundColor: null,
                borderWidth: 0,
              },
            },
          ],
        }}
        width={doughnutSize}
        height={doughnutSize}
        options={{
          responsive: false,
          maintainAspectRatio: true,
          plugins: {
            htmlLegend: {
              // ID of the container to put the legend in
              containerID: 'legend-container',
            },
            datalabels: {
              backgroundColor: null,
              borderColor: 'white',
              borderRadius: 25,
              borderWidth: 2,
              color: 'white',
              display: () => true,
              font: {
                weight: 'bold',
              },
              padding: 3,
              formatter: Math.round,
            },
            legend: {
              display: false,
            },
            tooltip: tooltips,
          },
        }}
        plugins={[htmlLegendPlugin]}
      />
    );
  }, [colors, data, labels, tooltips]); 

with a failure in compilation , I got this error there is no dom element with that plugin id

Thank you for your help

Reproduction

https://codesandbox.io/s/hungry-feather-yj81gq?file=/App.tsx

chart.js version

3.9.1

react-chartjs-2 version

4.3.1

Possible solution

No response

Forked On 19 Sep 2022 at 12:11:16

Arantiryo

After looking into the issue a bit closely, it apprears that this is the intended behavior as chart.js works in just the same way (code sandbox) without react-chartjs-2.

Commented On 19 Sep 2022 at 12:11:16
Issue Comment

Arantiryo

Bugfix: summing up stacked bars with undefined items in series

When there are undefined items in the series, the summing of stacked bars goes wrong.

Fixes #1254

Forked On 17 Sep 2022 at 05:54:01

Arantiryo

I think this PR can be closed: https://github.com/chartist-js/chartist/issues/1254#issuecomment-1250114191

Commented On 17 Sep 2022 at 05:54:01
Issue Comment

Arantiryo

Bug in summing up stacked bars with undefined items in series

When there are undefined items in the series, the summing of stacked bars goes wrong. I tracked it to this line: https://github.com/gionkunz/chartist-js/blob/e7e78201bffe9609915e5e53cfafa29a5d6c49f9/src/scripts/charts/bar.js#L152

Instead of

return {
    x: prev.x + (curr && curr.x) || 0,
    y: prev.y + (curr && curr.y) || 0
}; 

It should be

return {
    x: prev.x + ((curr && curr.x) || 0),
    y: prev.y + ((curr && curr.y) || 0)
}; 

Otherwise whenever curr is undefined, the reduce resets to 0.

Forked On 17 Sep 2022 at 05:51:34

Arantiryo

Looks like it's been fixed in v1.0.0:

https://github.com/chartist-js/chartist/blob/b431f76f95480841c2f04f4eb1b6c8055a1ce5f5/src/charts/BarChart/BarChart.ts#L34-L40

Commented On 17 Sep 2022 at 05:51:34