Hello everyone,
I would like to share with you the solution to a problem I had, and maybe more than one of you may have.
I wanted to use a custom chart from the Highchart library, into a custom code embed element of a collection list. It started to give me lots of problems. It only displays in one item, the rest of the items had a gap and the chart was not shown…
I went crazy, because…
- I had embedded the code inside of a collection list.
- I had marked the numeric value fields from the collection list
- So my question was… why it just shows in only one item? what happen with the rest?
The solution
- In the settings of your page. Put inside tag the Highchart script and styles.
My case:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.highcharts-figure, .highcharts-data-table table {
min-width: 310px;
max-width: 800px;
margin: 1em auto;
}
.chart-js{
height: 180px;
}
.highcharts-tooltip-box {
fill: #1778FB;
fill-opacity: 0.6;
stroke-width: 0;
margin-bottom: 8px;
}
.highcharts-tooltip text {
fill: #ffffff;
}
.highcharts-data-table table {
font-family: Roboto, sans-serif;
border-collapse: collapse;
border: 1px solid #EFF2F7;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #747D93;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table tr:hover {
background: #1778FB;
}
</style>
- Create a custom code element (embed component) where you want to show the chart. Here comes the best part… As you can maybe imagine, you could think that because it’s already in a collection list, I’ll just have to enter the fields needed for displaying the bars of the chart… Wrong. Here is the most important part, you will need to enter into the
id="container-(any field of your collection list)"
My case (I’ve enter just a field on the container ID and on the values, if needed you can also enter fields on the name of your values):
<figure class="highcharts-figure" >
<div id="container`-[+AddField (any of your collection list)]`" class="chart-js"></div>
</figure>
<script>
Highcharts.chart('container`-[+AddField (any of your collection list)]`', {
chart: {
type: 'column',
backgroundColor: '#FAFBFC'
},
credits: {
enabled: false
},
title: {
text: ''
},
tooltip: {
pointFormat: '<b>{point.series.name}</b><br/>{point.y:,.0f}€',
style: {
color: 'white',
fontWeight: 'bold'
}
},
accessibility: {
announceNewData: {
enabled: true
}
},
xAxis: {
type: 'category',
labels: {
style: {
color: '#747D93',
font: '12px Roboto, sans-serif'
}
}
},
yAxis: {
title: {
enabled: false
},
labels: {
style: {
color: '#747D93',
font: '12px Roboto, sans-serif'
}
}
},
colors: ["#0C1B7A"],
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
borderRadius: 4,
pointWidth: 8,
dataLabels: {
enabled: false,
}
}
},
series: [
{
name: "",
colorByPoint: true,
data: [
{
name: "2018Q3",
y: +AddField (number),
},
{
name: "2018Q4",
y: +AddField (number),
},
{
name: "2019Q1",
y: +AddField (number),
},
{
name: "2019Q2",
y: +AddField (number),
},
{
name: "2019Q3",
y: +AddField (number),
},
{
name: "2019Q4",
y: +AddField (number),
},
{
name: "2020Q1",
y: +AddField (number),
},
{
name: "2020Q2",
y: +AddField (number),
},
{
name: "2020Q3",
y: +AddField (number),
},
{
name: "2020Q4",
y: +AddField (number),
},
{
name: "2021Q1",
y: +AddField (number),
},
{
name: "2021Q2",
y: +AddField (number),
}
]
}
],
});
</script>
I hope this knowledge can help you
