In another forum I found this code which can be usefull for me:
var chart = new Chartist.Bar('.ct-chart', {
labels: ['Test', 'Long test', 'Very long test'],
series: [[1, 5, 3]]
});
// Uncomment this line to test rendering without foreign objects
//chart.supportsForeignObject = false;
chart.on('draw', function(event) {
// If the draw event is for labels on the x-axis
if(event.type === 'label' && event.axis.units.pos === 'x') {
// If foreign object is NOT supported, we need to fallback to text-anchor and event.width / 2 offset.
if(!chart.supportsForeignObject) {
event.element.attr({
x: event.x + event.width / 2,
'text-anchor': 'middle'
});
}
}
});
The special problem which is solved with that isn't the important thing. My problem is I don't use new Chartist.Bar to declare a new chartist component as I use react-chartist:
<ChartistGraph
data={graphData}
options={graphOptions}
type={type}
/>
So I cannot react on the onDraw event as in the example. Is it possible to bind a function to the onDraw event? I tried something like this:
<ChartistGraph
onDraw={e => onDrawHandler(e)}
data={graphData}
options={graphOptions}
type={type}
/>
which didn't work.