I am currently updating ConsoleTvs / Charts 6 to 7. The chart is rendering with expected data.
The chart is not rendering according to any of the set options object keys for legend point style circle, padding top 50, display 'y' & 'x' axis labelString, not display gridlines, positioning datalabels at end with start offset in bold and green :
const chart = new Chartisan({
el: '#test_chart',
url: "@chart('test_chart_route')",
hooks: new ChartisanHooks()
.colors()
.datasets(
[
{ type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' },
{ type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
{ type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' },
{ type: 'line', fill: false, borderColor: '#329865', backgroundColor: '#329865' },
{ type: 'line', fill: false, borderColor: '#1e5b3c', backgroundColor: '#1e5b3c' },
{ type: 'line', fill: false, borderColor: '#0f2d1e', backgroundColor: '#0f2d1e' },
{ type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' },
{ type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
{ type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
{ type: 'line', fill: false, borderColor: '#800000', backgroundColor: '#800000' },
{ type: 'line', fill: false, borderColor: '#F70000', backgroundColor: '#F70000' },
{ type: 'line', fill: false, borderColor: '#FF6F6F', backgroundColor: '#FF6F6F' },
]
),
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 50,
bottom: 0
},
},
aspectRatio: 1,
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
position: 'top',
labels: {
usePointStyle: true,
fontSize: 12,
},
},
elements: {
point: {
pointStyle: 'circle',
}
},
scales: {
xAxes: [{
maxBarThickness: 120,
scaleLabel: {
display: true,
labelString: "xAxes_label"
},
gridLines: {
display: false
},
ticks: {
fontSize: 10,
maxRotation: 80,
minRotation: 80,
padding: 2
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "yAxes_label"
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: true,
fontSize: 10,
suggestedMin: 0
},
}],
},
plugins: {
datalabels: {
color: '#ff0a6c',
labels: {
title: {
font: {
weight: 'bold',
size: 11,
}
},
value: {
color: 'green'
}
},
formatter: function(value, context) {
return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
},
anchor: 'end',
align: 'start',
display: 'auto',
clamp: false
}
}
}
});
I have also tried using the ChartisanHooks().options({...options...}) method with no change in set options.
Can anyone please show me in the right direction?
Instead of using the options hook, you defined options as a property. You should use .options({ ... }) but not options: { ... }.
The options hook however doesn't work for me, maybe I use an outdated Chartisan library. According to Custom Hooks, you can also merge the options to the chart as follows:
.custom(function({ data, merge }) {
return merge(data, {
options: {
...
}
}),
})
Please take a look at your amended and runnable code below and see how it works with the merge function.
const chart = new Chartisan({
el: '#test_chart',
data: {
"chart": {
"labels": ["First", "Second", "Third"]
},
"datasets": [{
"name": "Sample 1",
"values": [10, 3, 7]
},
{
"name": "Sample 2",
"values": [1, 6, 2]
}
]
},
hooks: new ChartisanHooks()
.colors()
.datasets(
[{
type: 'line',
fill: false,
borderColor: '#329865',
backgroundColor: '#329865'
},
{
type: 'line',
fill: false,
borderColor: '#1e5b3c',
backgroundColor: '#1e5b3c'
}
]
)
.custom(function({ data, merge }) {
return merge(data, {
options: {
layout: {
padding: {
left: 0,
right: 0,
top: 50,
bottom: 0
},
},
aspectRatio: 1,
maintainAspectRatio: false,
responsive: true,
legend: {
display: true,
position: 'top',
labels: {
usePointStyle: true,
fontSize: 12,
},
},
elements: {
point: {
pointStyle: 'circle',
}
},
scales: {
xAxes: [{
maxBarThickness: 120,
scaleLabel: {
display: true,
labelString: "xAxes_label"
},
gridLines: {
display: false
},
ticks: {
fontSize: 10,
maxRotation: 80,
minRotation: 80,
padding: 2
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: "yAxes_label"
},
gridLines: {
display: false,
drawBorder: false
},
ticks: {
display: true,
fontSize: 10,
suggestedMin: 0
},
}],
},
plugins: {
datalabels: {
color: '#ff0a6c',
labels: {
title: {
font: {
weight: 'bold',
size: 11,
}
},
value: {
color: 'green'
}
},
formatter: function(value, context) {
return (value != '' && value !== undefined) ? Math.round(value * 100) / 100 : value;
},
anchor: 'end',
align: 'start',
display: 'auto',
clamp: false
}
}
}
});
}),
});<script src="https://unpkg.com/[email protected]/dist/Chart.min.js"></script>
<script src="https://unpkg.com/@chartisan/chartjs@^2.1.0/dist/chartisan_chartjs.umd.js"></script>
<div id="test_chart" style="height: 300px;"></div>