Hi, I'm using:

"react": "^15.3.0",
"react-chartjs-2": "^1.2.4",
"webpack": "^1.13.1"

and when I try use chart with my wepack dev config like this:

import React from 'react';
import { connect } from 'react-redux';
import { Line } from 'react-chartjs-2';
...
render() {
  return (
      <div>
        { data ? <Line data={this.props.data} options={LINE_CHART_OPTIONS} /> : <Loader/> }
      </div>
  );
}

I get this error everytime

core.controller.js:496 Uncaught TypeError: Can't add property _meta, object is not extensible

But things work just fine when I build app with my production config, where webpack.UglifyJsPlugin added:

var uglifyPlugin =  new webpack.optimize.UglifyJsPlugin({
  compress: {
    sequences: true,
    dead_code: true,
    conditionals: true,
    booleans: true,
    unused: true,
    if_return: true,
    join_vars: true,
    drop_console: true
  },
  mangle: {
    except: ['$super', '$', 'exports', 'require']
  },
  output: {
    comments: false
  }
});

Please let me know if any additional info needed.

Including uncompiled source is likely to make a lot of build scripts (webpack, etc) fail, as it did for me on first install. Someone installing from npm is likely only interested in the lib folder and not in modifying the source. Consider adding /src to .npmignore so this module can be installed and used easily without having to set up exclusion rules to not bundle the uncompiled source code.

In some cases, charts do not update when data changes. I have tracked down the issue to a bug in deepEquals (imminent pull request)

It seems that in versions greater than 1.2.8 (starting definitively with 1.4.0) there is a rendering regression where the entire canvas tag is reloaded upon the click event of a href. For my application this is undesirable because there are tabs which correspond to tabular data that make use of hrefs. I don't know what precisely caused this (I'll have a look at the commits tomorrow if I have time) but I can assume it was likely unintentional and so wanted to report it ASAP.

With the newest version of react-chartjs-2 (1.5.5), dynamically updating bar charts with custom color sets (as in each bar chart color is individually defined) all appear as gray.

This was not an issue in 1.5.4, this does not affect dynamically updating donut charts, this does not affect dynamically updating bar charts with a fixed color scheme, and this does not affect static bar charts with custom color schemes. It is only when that bar chart has its data updated that everything turns gray.

Loving the new animation set for the charts, let me know if there's more information I can provide to help resolve this issue!

It looks like updates do not actually update all the options for a chart.

In the updateChart method of ChartComponent, it only updates the xAxis and the background colors. Couldn't we simply replace the entire options object with the updated one?

So in the updateChart method you'd put something like this:
var helpers = Chart.helpers;
this.chart_instance.options = helpers.configMerge(this.chart_instance.options, options);

I discovered this because it throws an error when it tries to update doughnut charts, because they don't have scales.
Could we get this fixed so that it updates all the chart options?

I'm running into a weird issue with setting a custom legend via legendCallback(chart)...

I need to access the chart data and labels to create my custom legend. As far as I can see, this is located in chart.data.labels and chart.data.datasets[0].data.

If I assign/console log chart I can see the data and labels present in the object, however if I try to access chart.data directly, both labels and data are empty arrays. Is there something I'm missing as to why this is the case? I can see there are get and set methods on the prototype of chart.data. Is there something that prevents directly accessing these properties?

How does one set the global chart options?

There is a problem with the implementation of deepEqual.
deepEqual(["A","B"],["A","B","C"]) returns true, which it should not.

From my testing, this is a problem because the algorithm only tests if "objA" has properties that "objB" doesn't have and not if "objB" has properties that "objA" doesn't have. So if "objB" is a superset of "objA", deepEqual evaluates correctly.

Hello:

We can hover the bar to see the detail value of the bar.
Is there any way to show the value above bar by default?

Thanks a lot !!

I will remove border around the doughnut graph.

Is-it possible ?

The react-chartjs-2 set 200 to width and height of the canvas by default.

A W3C document define them 300 and 150 as default value.

The width attribute defaults to 300, and the height attribute defaults to 150.

The Chart.js is not set width and height of the canvas by default.
As a result, the aspect ratio of the canvas is 2.
But the react-chartjs-2 is set 1 to the aspect ratio of the canvas.

I am confused by this.

We're using react-chartjs-2 for a sales reporting application and the users are keen to be able to save the reports as PDF / print them in order to take copies out and discuss them outside the building (it's an intranet app so no external access). We've noticed that the charts render quite blurry when PDF'd or printed to paper.

I found some chat on StackOverflow (e.g. http://stackoverflow.com/questions/34897515/chartjs-jspdf-blurry-image) suggesting that this was down to the canvas size of the chart but I haven't had any luck varying the canvas size using the width/height properties. Any suggestions?

With react-chartjs it was possible to retrieve the canvas by using refs like this:

Component:

<Line ref="linegraph" data={chartData} options={chartOptions} />

Code:

const canvas = this.refs.linegraph.getCanvas();

For some reason I cannot do the same with react-charjs-2, what would be the correct way to do that?

7a36b84 - these changes will have no effect if installed via npm

Is it possible to put a responsive label in the chart itself instead of tooltip?

I'm getting this error "Cannot read property of 'x-axis' of undefined" in the console when ever i try to update the data the chart is using (with tracker react). It looks like it wants the scales defined but its a Pie, there is no scale. (beside the default arc)?? I am using the latest Chartjs 2.1.6, I suspect maybe that is the problem but really I'm at a loss. Whats the last version of Chartjs that was functional with react-chartjs-2??

Hi!

Do you really need uid package?

Is this library specifically for react 0.14?

I have a lineChart with 3 datasets. The tooltip mode is set to 'x-axis', so at whatever y-height I hover, the tooltip shows data for the relevant data for points at that x-axis.

What I want to achieve is an onElementsClick that returns the hovered elements on that x-axis. Do you know how to achieve this?

Hi

I tried to access to the chart_instance of ChartComponent but I couldn't... I tried to pass a ref to my component but they are stateless... any advice?

We should show the bubble example.

Running and bundling spits out the following errors:

WARNING in ./~/react-chartjs-2/lib/Chart.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/react-chartjs-2/lib/chart.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

So as Windows doesn't support case sensitive filenames, require('chart.js') does not know which file to include here. Chart.js or chart.js

I managed to fix this by simply renaming /lib/Chart.js to /lib/index.js while also adjusting the main entry in package.json.

I can make a pull request if you want me to.

I imagine a use case/example like the following:

Given an existing line chart with data for each day of this week
And a different data set for projected data for each day of next week
When I want to display them together, but make the line for the projection dashes or a different color
Then I should be able to stack/mix them, same labels (dates), different data sets, both lines, but different displays, one axis

reasonable?

As far as I can tell, rendering is responding to page layout changes up to every 1ms.

Is there any way to throttle the rendering?
I think it should be max 60fps (~16ms frames)

import { Bar } from 'react-chartjs-2';

$ npm list react-chartjs-2
└── [email protected]

$ eslint imports/modules/Stats/components/HeroLineBarChart.js

.../imports/modules/Stats/components/HeroLineBarChart.js
  9:10  error  Bar not found in 'react-chartjs-2'  import/named

I don't see any obvious problem, looking at your code, but thought you should know about this lint/import complaint...

Hi !

When updating the graphs data and changing the scales options nothing happen on the scale.

I have a line chart with values on Y and dates on X when I change the time span from last month to last week the values are well changed but the X axes do not change its scale.

Please note that my options has been changed on the Line component.

Hello,

Thanks a lot for this library, is is really useful!

I'm having a small problem with chart being updated every time parent's state changes.
It seems like ChartComponent#shouldComponentUpdate() method always returns true when props contain onElementsClick function.
This is probably caused by deepEqual expecting only arguments of type 'object':
typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null
and typeof props.onElementsClick === 'function'.

I'd be happy to provide a PR but want to discuss the solution:

1. just add onElementsClick to the list of excluded properties in shouldComponentUpdate();
2. make shouldComponentUpdate() compare only props.data, props.legend, props.options, props.type and remove code for exclusion entirely.

Please let me know what is best and if I can submit a PR.

This PR that was merged and released to the version 1.2.7 has type definitions for the react-chartjs-2. Unfortunately, I get an error that module React cannot be found and it seems to be because React starts with an uppercase letter.

When I change the type definition file's first line to this:

import * as React from 'react';

Everything works correctly.

I am running on Windows system using tsc 1.8.10 and 2.0.3

Updating the datasets does not update the labels.
It works if I add this line to the updateChart method:
this.chart_instance.config.data.labels = data.labels;

Hello, im tryin to build a line chart, ihave too many xlabels il trying to hide it by step, i passed this options (see code below) but seem like it dont work. Did somebody have an idea.
Thanks.

const Options = {responsive: true,showXLabels: 4}; 

<PanelChart title ="GRAPH WATTAGE">
            <Line data={data} height={100} options={Options} />
          </PanelChart>

I like this library very much. But in my testing with [email protected] and [email protected], the width and height do not work for me.
I set them as 300 and 200 respectively, the result was that the pie and Doughnut occupied the whole width of the page. I wonder whether something is wrong with my code or anything else in this library. Any response will be appreciated.

my code is:
<Pie
data={this.phyiscalMemory}
width={300}
height={200}
options={{
maintainAspectRatio: false
}}
/>

The intention of the code seems to be that it will only redraw when the props are actually different, but in practice, it redraws as long as the props are a different object (i.e. basically always).

Hi,
It is awesome that you guys have a react wrapper for chartjs2. Really appreciate it. :)

I am trying to use the tooltip callbacks in chartjs to get multiple lines (data from external source) in the tooltip. But I am not able to use it in this wrapper. Could you help me out?

Any help is appreciated. Thanks in advance.

Hi,

does react-chartjs-2 support showxlabels / skiplabels ?

Thanks

Is there a possibility to use the Chart.pluginService.register-functionality ?

http://www.chartjs.org/docs/#advanced-usage-creating-plugins

Stumpled upon this as a solution for a lot of things, but don't see an option to use it with this component right now. Maybe I miss something ?

1. Color doesn't apply
2. data's are not stacked on yAxes, rather side by side relatively stacked.

I am trying to reload if height and width change. I can't find any methods to do that.

Are there any plans to add this functionality?

Hi,

I am working on a no-isomorphic app and I got this error. It's coming form the package react-chartjs-2 itself.

Error Log :

> [email protected] start-dev /home/safran/Dev/Myapp/Admin
> npm run build && NODE_ENV=development nodemon src/index.js --exec babel-node --presets es2015,stage-2 --ext js


> [email protected] build /home/safran/Dev/Myapp/Admin
> webpack -d --progress

Hash: b444b947f5ab90805425  
Version: webpack 1.13.3
Time: 5755ms
	Asset     	Size  		Chunks               Chunk Names
    app.bundle.js  	3.14 MB       	0  [emitted]  	         main
app.bundle.js.map  	3.47 MB       	0  [emitted]  	         main

   [0] multi main 64 bytes {0} [built]
    + 1237 hidden modules

[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node src/index.js --presets es2015,stage-2`

2016-11-06T02:39:23.046Z - error: uncaughtException: window is not defined date=Sat Nov 05 2016 22:39:23 GMT-0400 (EDT), pid=8993, uid=1000, gid=1000, cwd=/home/safran/Dev/Myapp/Admin, execPath=/home/safran/.nvm/versions/node/v6.0.0/bin/node, version=v6.0.0, argv=[node, /home/safran/Dev/Myapp/Admin/src/index.js, --presets, es2015,stage-2], rss=107520000, heapTotal=83120128, heapUsed=61719536, loadavg=[1.5400390625, 2.1279296875, 1.93115234375], uptime=7969, trace=[column=10, file=/home/safran/Dev/Myapp/Admin/node_modules/react-chartjs-2/node_modules/chart.js/src/core/core.helpers.js, function=null, line=676, method=null, native=false, column=3, file=/home/safran/Dev/Myapp/Admin/node_modules/react-chartjs-2/node_modules/chart.js/src/core/core.helpers.js, function=module.exports, line=684, method=exports, native=false, column=31, file=/home/safran/Dev/Myapp/Admin/node_modules/react-chartjs-2/node_modules/chart.js/src/chart.js, function=, line=6, method=null, native=false, column=32, file=module.js, function=Module._compile, line=541, method=_compile, native=false, column=10, file=module.js, function=Module._extensions..js, line=550, method=_extensions..js, native=false, column=7, file=/home/safran/Dev/Myapp/Admin/node_modules/babel-register/lib/node.js, function=Object.require.extensions.(anonymous function) [as .js], line=152, method=require.extensions.(anonymous function) [as .js], native=false, column=32, file=module.js, function=Module.load, line=456, method=load, native=false, column=12, file=module.js, function=tryModuleLoad, line=415, method=null, native=false, column=3, file=module.js, function=Function.Module._load, line=407, method=Module._load, native=false, column=17, file=module.js, function=Module.require, line=466, method=require, native=false], stack=[ReferenceError: window is not defined,     at /home/safran/Dev/Myapp/Admin/node_modules/react-chartjs-2/node_modules/chart.js/src/core/core.helpers.js:676:10,     at module.exports (/home/safran/Dev/Myapp/Admin/node_modules/react-chartjs-2/node_modules/chart.js/src/core/core.helpers.js:684:3),     at Object.<anonymous> (/home/safran/Dev/Myapp/Admin/node_modules/react-chartjs-2/node_modules/chart.js/src/chart.js:6:31),     at Module._compile (module.js:541:32),     at Module._extensions..js (module.js:550:10),     at Object.require.extensions.(anonymous function) [as .js] (/home/safran/Dev/Myapp/Admin/node_modules/babel-register/lib/node.js:152:7),     at Module.load (module.js:456:32),     at tryModuleLoad (module.js:415:12),     at Function.Module._load (module.js:407:3),     at Module.require (module.js:466:17)]

[nodemon] clean exit - waiting for changes before restart

Thank you for your help.

When updating the data of the chart instance, you replace all of it which makes chart.js re-render the chart even though you've only updated the data points. This makes it impossible to animate between changed values.

It would be great if when we only update data points that it would update them them properly so that seamless animation between point values work as intended.

Is there any reason why not to export Chart constructor? For example I need to monkey-patch things like this https://jsfiddle.net/56s9av1j/.

I can PR this.

I need to fetch data when clicked on specific point on Line chart. This has been implemented on chart.js by this function getDatasetAtEvent(e). Any hint or help will be most appreciate?

This was fixed in the original react-chartjs however there are a few long standing issues on that one and I was redirected here. However it doesn't appear that your library works in the same way for what i am trying to acheive.

On react-chartjs using chart.js v2 I am able to produce the below chart where I haven't specified an array of labels and it has been able to scale the labels out based on my time.unit value;

See end for example code that works with the react-chartjs library but produces an error with react-chartjs-2 # which is when you are trying to map the labels for the legend.

If I change labels field in code below to "labels: ['Dataset']". Then the chart renders but no data and y axis:

    var data = {
        labels: 'Dataset',
        datasets: [{
            data: [
            { datetime: moment().hour(8).minute(0).format('X'),  rate: 1.1757},
            { datetime: moment().hour(8).minute(2).format('X'),  rate: 1.1797},
            { datetime: moment().hour(8).minute(9).format('X'),  rate: 1.1697},
            { datetime: moment().hour(8).minute(11).format('X'), rate: 1.1717},
            { datetime: moment().hour(8).minute(22).format('X'), rate: 1.1715},
            { datetime: moment().hour(8).minute(29).format('X'), rate: 1.1747},
            { datetime: moment().hour(8).minute(35).format('X'), rate: 1.1691},
            { datetime: moment().hour(8).minute(45).format('X'), rate: 1.1797},
            { datetime: moment().hour(8).minute(49).format('X'), rate: 1.1817},
            { datetime: moment().hour(9).minute(1).format('X'),  rate: 1.1857},
            { datetime: moment().hour(9).minute(12).format('X'), rate: 1.1847},
            { datetime: moment().hour(9).minute(33).format('X'), rate: 1.1877},
            { datetime: moment().hour(10).minute(0).format('X'), rate: 1.1957},
            { datetime: moment().hour(11).minute(0).format('X'), rate: 1.1857}
        ];
        }]
    };

  var options = {
        legend: {
            display:false,
        },
        // showXLabels: 10,
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            xAxes: [{
                type: 'time',
                position: 'bottom',
                time: {
                    parser: 'X',
                    unit: 'hour',
                    tooltipFormat: 'LT',
                    max: moment().hour(11).minute(0).format('X'),
                    displayFormats: {
                        'hour': 'LT'
                    }

                }
            }]
         }
    };

In my isomorphic app, i have installed react-chartjs-2 and chart.js.
I am using line chart for displaying charts.

import React,{Component} from 'react'
import {Line} from 'react-chartjs-2'

const data = {
  labels: ['January','','February', '','March'],
  datasets: [
    {
      label: 'Last 24 hours data',
      fill: true,
      backgroundColor: 'rgba(88,96,103,0.6)',
      borderColor: 'rgba(75,192,192,1)',
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40]
    }
  ]
};

const options = {
  scales: {
    xAxes: [{
      display: true,
      gridLines : {
        color: "#464f56",
        lineWidth: 0,
        showTickMarks: false
      },
      ticks: {
        beginAtZero:true,
      },

    }],
    yAxes:[{
      gridLines: {
        lineWidth: 1,
        color: "#fff",
      },
      ticks: {
        stepSize:40,
        beginAtZero:true,
        showLabelBackdrop: true
      },

    }]
  },
  scaleStartValue: 0,
  maintainAspectRatio: true
};

export default class Test extends Component{
        render(){
               return (
                     <div>
                         {
                          window != undefined
                          ?
                          <Line data={data} options={options} />
                          :
                         null
                         }
                     </div>
               )
        }
}

But when i run the app using npm start, I am getting following error:

           return window.requestAnimationFrame ||
                       ^
ReferenceError: window is not defined
    at /myapp/node_modules/chart.js/src/core/core.helpers.js:676:10

Any ideas as to the cause or how to fix it?
Thanks.

Hey there,

The charts are working nicely. Only issue I am having is that I want to do
this.refs.chart.chart_instance.toBase64Image() in the parent component which hosts the child component being the graph. It seems this.refs.chart.chart_instance.toBase64Image() only works in the child component as I cannot access .chart_instance in the parent component when referring to the child.

Any help here would be much appreciated. It is possible that I am thinking about this incorrectly

Hi,

Any examples for legend?
I tried something like:

<Doughnut data={this.props.doughnutData} legend={{display: true,position: 'bottom'}} />

but the legend is still on top of the chart.

Thank you in advance.

Would it be possible to reload charts options automatically ?

I have a Line chart on which I want the scales to be dynamic. I then have some properties on my option object that can change but it does not seem to be updated when the data changes.

Could you make an example on how we can support the new mix chart type, with some data sets on line and some on bar, with disparate Y axis values?

I am testing this library to create a chart for an app. I saw the sample dataset below from this tutorial.

import React, { Component } from 'react'
import { Line } from 'react-chartjs-2'

class CurrencyChart extends Component {
  render() {
    const chartData = {
        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
        datasets: [{
          label: 'apples',
          data: [12, 19, 3, 17, 6, 3, 7],
          backgroundColor: "rgba(153,255,51,0.6)"
        }, {
          label: 'oranges',
          data: [2, 29, 5, 5, 2, 3, 10],
          backgroundColor: "rgba(255,153,0,0.6)"
        }]
      }
    return (
      <Line data={chartData} width={600} height={250}></Line>
    )
  }
}

export default CurrencyChart

I added bootstrap and jquery from a cdn in the html file. This is the output (The buttons on the top come from the parent component):

I tried using the chart.js without the react-chartjs-2 package but it is either not being rendered or with no background color.

The onElementsClick returns the element under the event point, then returns all elements at the same data index.
But I want to know which dataset is clicked. In other words I want to get a dataset that the clicked element in.

So, I want an onDatasetClick property that returns the element under the event point, then returns all elements from that dataset by the .getDatasetAtEvent(e) of the Chart.js instance.

Reference

Thank you.