Hello everyone!
Just created a Dash component for react-chartjs-2 and thought about sharing it with you guys.
PyPi: Click here
Github: Click here
Cheers!
13 Likes
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.
Here’s what a simple example of a time-series line chart could look like with dash-chartjs:
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)
This is pretty cool.
What are the callbacks like with it? Do they give selectedData and clickData like the plotly charts?
@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. 
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.
1 Like
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?
For that you can try something like this:
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'
}
}
}
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?
2 Likes
@adamschroeder Sure, that’ll be great. I’ll be happy to collaborate or accept pull requests if anyone is interested
2 Likes
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), 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:
'plugins': {
'tooltip': {
'callbacks': {
'title': "function(context) {return 'title';}",
}
}
Do you have any idea how to fix this?
1 Like
@George9D For now the component doesn’t provide the support for embedding js. Though it could be a nice feature.
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.
1 Like
in ChartJS we have the option to create a Linear Gradient, Is it possible to implement this in this package?
@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:
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.
#
)
1 Like
@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)
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.
Hey! Super nice component, thanks for sharing it!
Is it possible to compose these charts? Thanks in advance !
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 that could be valuable additions to this component.
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!