Yes, in order to utilize these plugins, they must first be integrated into the dash-chartjs package.
However, the functionality you’re seeking can be achieved using Plotly charts.
Yes exactly, I also use it for this, I’m just not completely satisfied with the resizing transitions. But I’ll stick with it for now, thanks!
Hi! Are there plans to add this feature? Maybe like dash-extensions does it? It’s really the only missing feature for my use case.
Exciting Update: dash-chartjs==0.0.9 now supports inline JavaScript! 
Here’s an example of how you can use the customJSFunctions prop to define features like linear gradients and apply custom background colors through the customPlugins prop.
from dash_chartjs import ChartJs
from dash import Dash, html
import random
app = Dash(__name__,meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}])
app.layout = html.Div(
[
ChartJs(
id='chart-1',
type='line',
customJSFunctions={
'custom_gradient':
'''
function (ctx) {
const canvas = ctx.chart.ctx;
const gradient = canvas.createLinearGradient(0, 25, 0, 300);
gradient.addColorStop(0, "rgba(149, 76, 233, 0.5)");
gradient.addColorStop(0.35, "rgba(149, 76, 233, 0.25)");
gradient.addColorStop(1, "rgba(149, 76, 233, 0)");
return gradient;
}
'''
},
customPlugins={
'myCustomPlugin':
'''
{
id: 'myCustomPlugin',
beforeDraw: (chart, args, options) => {
const { ctx } = chart;
ctx.save();
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, chart.width, chart.height);
ctx.restore();
},
}
'''
},
data = {
'labels': ['Jan','Feb','Mar','Apr','May','Jun','Jul'],
'datasets': [
{
'label': 'Sales',
'fill': True,
'borderWidth': 2,
'backgroundColor': 'custom_gradient',
'pointBackgroundColor': "rgba(149, 76, 233, 1)",
'borderColor': "rgba(149, 76, 233, 1)",
'lineTension': 0.2,
'pointRadius': 3,
'data': [random.randrange(0,100,1) for i in range(7)]
},
]
},
options= {
'responsive': True,
'plugins': {
'title': {
'display': True,
'text': 'Chart.js Line Chart'
},
'datalabels': {
'display':False
}
}
},
)
]
)
if __name__ == '__main__':
app.run_server(debug=True)
2 Likes
More chart types added to dash-chartjs:
Example code can be seen here:
dash-chartjs/examples at main · zenalytiks/dash-chartjs
1 Like