# Dash Chart.js Component

**URL:** <https://community.plotly.com/t/dash-chart-js-component/68266>\
**Category:** Dash Python\
**Tags:** show-and-tell, community-components\
**Created:** [September 23, 2022, 9:35pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266 "2022-09-23T21:35:21Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [September 23, 2022, 9:35pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/1 "2022-09-23T21:35:21Z")

</div>

Hello everyone!

Just created a Dash component for [react-chartjs-2](https://react-chartjs-2.js.org/) and thought about sharing it with you guys.

![Dash_Chartjs_Component](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/4/d4039139767de9401caf4e96085d0194005dc5ff.gif)

PyPi: [Click here](https://pypi.org/project/dash-chartjs/)  
Github: [Click here](https://github.com/zenalytiks/dash-chartjs)

Cheers!

---

<div class="post-metadata">

**Author:** ![zeldridge-aamg](https://avatars.discourse-cdn.com/v4/letter/z/d9b06d/32.png) [@zeldridge-aamg](https://community.plotly.com/u/zeldridge-aamg)\
**Post date:** [October 19, 2022, 4:08am UTC](https://community.plotly.com/t/dash-chart-js-component/68266/2 "2022-10-19T04:08:56Z")

</div>

Can you please do more examples with perhaps data that has an x and y component to the line graph, instead of just random for each graph? It is a bit hard to understand how to use this with the examples being the same for each plot.

---

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [October 20, 2022, 5:48pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/3 "2022-10-20T17:48:05Z")

</div>

Here’s what a simple example of a time-series line chart could look like with dash-chartjs:

```auto
from dash import dash,html
import pandas as pd
from dash_chartjs import ChartJs

app = dash.Dash( __name__ ,meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}])

df = pd.read_csv('https://raw.githubusercontent.com/JetBlack101/visitors-to-georgia-ts-analysis/main/Data/VisitorsToGeorgia_2011-2019.csv')

df['Date'] = pd.to_datetime(df['Date'])

x = df['Date']
y = df['Visitors']

data = {
    'labels': x,
    'datasets': [{
        'label': 'Visitors to Georgia',
        'data': y,
        'fill':'false',
        'borderColor': 'rgb(75, 192, 192)',
        'tension': 0.1
    }]
}
options = {
    'scales': {
        'x': {
            'type':'time'
        }
    } 
}

app.layout = html.Div(
    [
        ChartJs(type='line',data=data,options=options)
    ]
)

if __name__ == ' __main__':
    app.run_server(debug=False)

```

 ![Capture](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/a/1/a1c073b15336ad91e84438a4826558f609f07c71.png)

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 20, 2022, 6:24pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/4 "2022-10-20T18:24:21Z")

</div>

@waleedmalik,

This is pretty cool.

What are the callbacks like with it? Do they give selectedData and clickData like the plotly charts?

---

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [October 20, 2022, 6:48pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/5 "2022-10-20T18:48:05Z")

</div>

@jinnyzor It’s just a minimal component for now but I plan to add clickData later on. React is not really my strong suit so I’m learning as I go. 🙂

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 20, 2022, 7:01pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/6 "2022-10-20T19:01:46Z")

</div>

I really liked how smooth the animations of chart.js were. The thing that was not fun, was the lack of tools. The toggling with the legend is fun, but cant really dive deep and filter other charts with it innately.

Aim for building a modebar like plotly for a couple of tools to sit in. (Select, Zoom, etc) In order to be able to use this, I think you’d have to make sure there was an id given to the chart to be able to query the other information, via \_metasets or legends.

---

<div class="post-metadata">

**Author:** ![zeldridge-aamg](https://avatars.discourse-cdn.com/v4/letter/z/d9b06d/32.png) [@zeldridge-aamg](https://community.plotly.com/u/zeldridge-aamg)\
**Post date:** [October 21, 2022, 12:35am UTC](https://community.plotly.com/t/dash-chart-js-component/68266/7 "2022-10-21T00:35:52Z")

</div>

Thanks for that Waleed, that helped alot! How would I display two different types of data sets with two y axis (ie. different scales) with time on the x axis in the graph?

---

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [October 21, 2022, 11:34pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/8 "2022-10-21T23:34:46Z")

</div>

For that you can try something like this:

```auto
data = {
    'labels': x,
    'datasets': [{
        'label': 'Dataset 1',
        'data': y1,
        'borderColor': 'rgb(75, 192, 192)',
        'yAxisID': 'y'
    },
    {
        'label': 'Dataset 2',
        'data': y2,
        'borderColor': 'rgb(75, 192, 192)',
        'yAxisID': 'y1'
 
    }]
}
options = {
    'scales': {
        'y': {
            'type': 'linear',
            'display': True,
            'position': 'left',
      },
      'y1': {
            'type': 'linear',
            'display': True,
            'position': 'right',
            'grid': {
              'drawOnChartArea': False,
            },
      },
     'x': {
        'type':'time'
      }
    }
}

```

---

<div class="post-metadata">

**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\
**Post date:** [October 25, 2022, 2:10pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/9 "2022-10-25T14:10:58Z")

</div>

Thank you for creating and sharing this package, @waleedmalik  
If others would be interested in contributing to it as well, what’s the best way? Are you planning to continue developing Dash Chart.js?

---

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [October 27, 2022, 3:56pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/10 "2022-10-27T15:56:45Z")

</div>

@adamschroeder Sure, that’ll be great. I’ll be happy to collaborate or accept pull requests if anyone is interested 🙂

---

<div class="post-metadata">

**Author:** ![George9D](https://avatars.discourse-cdn.com/v4/letter/g/b5e925/32.png) [@George9D](https://community.plotly.com/u/George9D)\
**Post date:** [April 21, 2023, 7:57am UTC](https://community.plotly.com/t/dash-chart-js-component/68266/11 "2023-04-21T07:57:10Z")

</div>

Thank you very much. I have been using it for some time now and I really love how smooth the animations are. Since a lot of additional functionalities of chart.js require to pass a custom function I wanted to ask if this is possible with your component or not? I have been playing around with the lightweight chart packaged and there one can add custom functions simply as a string. However, if I do the same with your component, it doesn’t seem to work.

As an example: I want to customize the title of the tooltip. According to the chart.js docs ([Tooltip | Chart.js](https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks)), one has to use the callbacks property together with a function that returns a string which is used for the title of the tooltip. I used the following code which resulted in a chart which had no tooltips at all:

```auto
'plugins': {
    'tooltip': {
        'callbacks': {
            'title': "function(context) {return 'title';}",
        }
    }

```

Do you have any idea how to fix this?

---

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [April 22, 2023, 4:39pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/12 "2023-04-22T16:39:20Z")

</div>

@George9D For now the component doesn’t provide the support for embedding js. Though it could be a nice feature.

---

<div class="post-metadata">

**Author:** ![George9D](https://avatars.discourse-cdn.com/v4/letter/g/b5e925/32.png) [@George9D](https://community.plotly.com/u/George9D)\
**Post date:** [April 23, 2023, 9:38am UTC](https://community.plotly.com/t/dash-chart-js-component/68266/13 "2023-04-23T09:38:33Z")

</div>

Thanks for the quick response. Would definitely come in handy in a lot of places, since chart.js doesn’t support a lot of things out of the box and requires to use user-defined functions. Once again, thank you for providing us with this amazing component. Those animations are amazing. Even if it requires some work to adjust to it, it is definitely worth it imo.

---

<div class="post-metadata">

**Author:** ![Fabio\_Schramm](https://avatars.discourse-cdn.com/v4/letter/f/7bcc69/32.png) [@Fabio\_Schramm](https://community.plotly.com/u/Fabio_Schramm)\
**Post date:** [October 2, 2023, 2:54pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/14 "2023-10-02T14:54:52Z")

</div>

in ChartJS we have the option to create a Linear Gradient, Is it possible to implement this in this package?

@waleedmalik

---

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [October 3, 2023, 4:03pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/15 "2023-10-03T16:03:41Z")

</div>

@Fabio_Schramm You can apply a gradient on charts with this package now. I’ve just released a new version.  
Here’s how it can be implemented:

```auto
dash_chartjs.ChartJs(id='chart-1', 
        type='bar', # chart.js chart type.
        options={}, # chart.js options object
        linearGradientList=["#ff6d50","#9e2f2f","#4b2828",...], # list of colors that'll be used to generate a gradient color palette.
        linearGradientDirection='vertical', # direction of gradient. Can be 'vertical' or 'horizontal'. Vertical by default.
        useGradient='backgroundColor' # apply a gradient on 'backgroundColor', 'borderColor', or 'both'. Both by default.
#
)

```

---

<div class="post-metadata">

**Author:** ![atv99](https://avatars.discourse-cdn.com/v4/letter/a/54ee81/32.png) [@atv99](https://community.plotly.com/u/atv99)\
**Post date:** [September 10, 2024, 5:34am UTC](https://community.plotly.com/t/dash-chart-js-component/68266/16 "2024-09-10T05:34:29Z")

</div>

@waleedmalik is there a way to add community-made charts like this sunburst chart shown here:  
([GitHub - pandameister/chartjs-chart-sunburst: Chart.js sunburst chart implementation](https://github.com/pandameister/chartjs-chart-sunburst/tree/master))

---

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [September 13, 2024, 3:09pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/17 "2024-09-13T15:09:43Z")

</div>

This could be a good addition to the component since sunburst is not available in the chart.js library. I’ll definitely consider including it in the next release.

---

<div class="post-metadata">

**Author:** ![Datenschubse](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@Datenschubse](https://community.plotly.com/u/Datenschubse)\
**Post date:** [September 14, 2024, 11:30am UTC](https://community.plotly.com/t/dash-chart-js-component/68266/18 "2024-09-14T11:30:11Z")

</div>

Hey! Super nice component, thanks for sharing it!

Is it possible to compose these charts? Thanks in advance !

---

<div class="post-metadata">

**Author:** ![waleedmalik](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/waleedmalik/32/31947_2.png) [@waleedmalik](https://community.plotly.com/u/waleedmalik)\
**Post date:** [September 14, 2024, 3:38pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/19 "2024-09-14T15:38:13Z")

</div>

Indeed, I’ve reviewed the plugin shared by @atv99, but it doesn’t appear to be available on npm. Additionally, it seems that the plugin hasn’t been maintained for some time.  
However, I did come across some [chart plugins](https://github.com/chartjs/awesome?tab=readme-ov-file#charts) that could be valuable additions to this component.

---

<div class="post-metadata">

**Author:** ![Datenschubse](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@Datenschubse](https://community.plotly.com/u/Datenschubse)\
**Post date:** [September 14, 2024, 5:41pm UTC](https://community.plotly.com/t/dash-chart-js-component/68266/20 "2024-09-14T17:41:55Z")

</div>

Thanks for the fast response! So an additional package is needed? Maybe I should outline my needs a little bit more. I am currently using plotly to create a stacked bar chart with a stacked area chart in the back and a line chart on top. So I would just need to combine already ported charts.

Thanks!

[Next page](https://community.plotly.com/t/dash-chart-js-component/68266.md?page=2)