I am new to using HighCharts and Javascript. Through tutorials and trial and error I have been able to get a working highcharts. The only problem now is I think I have added in some code that is making it so that I can not change the lineWidth for any of the series and cannot add a yAxis line to my chart. I have tried everything from plotOption, trying to redraw the lines and no matter what nothing on the lines change in thickness. Not even when adding hover the lines does anything happen other than the markers get bigger.
The backend works fine the html works fine. I can dynamically bring in the charts and view them and export them. Just I can not for the life of me get the lineWidth to thicken or get the yAxis to show. I event tried setting the HighChart default settings and nothing changes when it comes to lineWidth or yAxis.
I think something is overwriting the settings or my sequence is wrong. But I have not been able to figure it out. I am hopping some can help.
Here is a picture of my HTML: HTML of working Chart
Here is my code:
function createChart(container, title, data, hasValue2, hasValue3, isPercentage, isReversed) {
const chartId = 'chart_' + container;
console.log('Creating chart with ID:', chartId);
// Call the createChartCard function to wrap the chart in a Bootstrap card
createChartCard(title, chartId);
// Call Highcharts.chart() after appending the chart container to the DOM
console.log('Rendering chart:', chartId);
// Create the Highcharts chart
Highcharts.chart(chartId, {
chart: {
borderColor: '#4572A7',
plotBorderWidth: 2,
//plotBorderColor: '#CCCCCC',
type: 'line',
// width: 400, // Adjust the width as needed
// height: 200, // Adjust the height as needed
},
credits: {
enabled: false
},
title: {
text: title,
style: {
fontSize: '16px', // Set the font size to 10 pixels
},
},
exporting: {
enabled: true, // Enable exporting
chartOptions: {
chart: {
width: 841, // Set the chart width to fit the landscape A4 paper (841mm)
height: 595, // Set the chart height to fit the landscape A4 paper (595mm)
margin: [50, 50, 50, 50], // Set the chart margins (top, right, bottom, left)
},
},
},
legend: {
enabled: hasValue2 || hasValue3, // Show legend if either value2 or value3 is present
itemStyle: {
color: 'transparent', // Make the legend text color transparent
},
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: function () {
// Hide legend entry for "Series3" when chart only has "value1" and "value2"
if (!hasValue3 && this.name === 'Series 3') {
return '';
}
return this.name; // Show other legend entries as usual
},
},
xAxis: {
//lineColor: '#FF0000',
lineWidth: 2,
tickLine: 0,
tickLength: 0,
//lineColor: 'transparent',
type: 'datetime',
//title: {
// text: 'Date',
// },
labels: {
rotation: -90,
y: 10,
formatter: function () {
// Custom formatter function to display the date as "dd/m/yyyy" without leading zeros in the year
// const date = new Date(this.value);
//const day = date.getDate();
// const month = date.getMonth() + 1; // Months are zero-based, so we add 1
// const year = date.getFullYear().toString().slice(-2); // Get the last two digits of the year
// Concatenate the formatted date components
//return day + '/' + month + '/' + year;
return Highcharts.dateFormat('%e %b %y', this.value);
},
style: {
fontSize: '12px', // Set the font size to 10 pixels
},
},
//offset: 0, // Set the offset to move the labels closer to the chart
},
yAxis: {
title: {
text: isPercentage ? 'Percentage' : '',
},
reversed: isReversed,
labels: {
x: -10,
formatter: function () {
if (isPercentage) {
return this.value;
} else if (Math.round(this.value) === this.value) {
return this.value; // Display as a whole number if it is an integer
} else {
return this.value.toFixed(2); // Otherwise, display with 2 decimal places
}
if (isReversed) {
return -this.value; // Reverse the axis values
} else {
return this.value;
}
},
style: {
fontSize: '12px', // Set the font size to 10 pixels
},
},
//offset: 0, // Set the offset to move the labels closer to the chart
max: isPercentage ? 100 : null,
//softMin: isPercentage ? 0 : 0, // Set max to 100 if isPercentage is true
},
tooltip: {
formatter: function () {
let tooltip = Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br>';
if (isPercentage) {
tooltip += 'Percentage: ' + (this.y).toFixed(2) + '<br>';
} else if (Math.round(this.y) === this.y) {
tooltip += 'Value: ' + this.y + '<br>';
} else {
tooltip += 'Value: ' + this.y.toFixed(2) + '<br>';
}
if (hasValue2 && this.point.y2 !== undefined) {
if (isPercentage) {
tooltip += 'Percentage 2: ' + (this.point.y2).toFixed(2) + '<br>';
} else if (Math.round(this.point.y2) === this.point.y2) {
tooltip += 'Value 2: ' + this.point.y2 + '<br>';
} else {
tooltip += 'Value 2: ' + this.point.y2.toFixed(2) + '<br>';
}
}
if (hasValue3 && this.point.y3 !== undefined) {
if (isPercentage) {
tooltip += 'Percentage 3: ' + (this.point.y3).toFixed(2) + '<br>';
} else if (Math.round(this.point.y3) === this.point.y3) {
tooltip += 'Value 3: ' + this.point.y3 + '<br>';
} else {
tooltip += 'Value 3: ' + this.point.y3.toFixed(2) + '<br>';
}
}
return tooltip;
},
},
series: [
// Series 1 (value1)
{
name: '',
data: data.map(item => ({
x: Date.parse(item.x),
y: isPercentage ? item.y : parseFloat(item.y),
})),
color: 'black', // Default line color for Value 1
//visible: !hasValue2 && !hasValue3, // Show only if value2 and value3 are false
lineWidth: 4, // Increase the line width for this series
marker: {
enabled: true,
radius: 4, // Increase the marker size for this series
},
},
// Series 2 (value2)
hasValue2
? {
name: '',
data: data.map((item, index) => ({
x: Date.parse(item.x),
y: item.y2 !== undefined ? (isPercentage ? item.y2 : parseFloat(item.y2)) : null,
//color: index > 0 && item.y2 < data[index - 1].y2 ? 'red' : 'black',
})),
dashStyle: 'dot', // Set dash style for Value 2
showInLegend: hasValue2,
lineWidth: 3, // Set the line width to 3
color: 'black',
marker: {
enabled: true,
radius: 4, // Increase the marker size for this series
symbol: 'circle', // Increase the marker size for this series
},
}
: {},
// Series 3 (value3)
hasValue3
? {
name: '',
data: data.map(item => ({
x: Date.parse(item.x),
y: item.y3 !== undefined ? (isPercentage ? item.y3 : parseFloat(item.y3)) : null,
})),
color: 'black', // Default line color for Value 3
dashStyle: 'longdash', // Set dash style for Value 3
showInLegend: hasValue3,
lineWidth: 4, // Increase the line width for this series
marker: {
enabled: true,
radius: 4, // Increase the marker size for this series
symbol: 'circle',// Increase the marker size for this series
},
}
: {},
],
});
}
function createChartCard(title, chartId) {
const cardHtml = `
<div class="col-md-6">
<div class="card h-100 w-100">
<div class="card-body" style="height: 100%;">
<div id="${chartId}"></div>
</div>
<div class="card-footer text-muted"></div>
</div>
</div>
`;
$('#chartContainer').append(cardHtml);
}
function processData(data) {
const chartsData = {};
data.forEach((row) => {
const chartname = row.chartname;
const isPercentage = Boolean(parseInt(row.ispercentage)); // Convert '0' to false, '1' to true
const isReversed = Boolean(parseInt(row.isreversed)); // Convert '0' to false, '1' to true
console.log(row.isreversed);
if (!chartsData[chartname]) {
chartsData[chartname] = {
title: row.user + ' - ' + row.jobname + ' - ' + chartname,
data: [],
hasValue2: false,
hasValue3: false,
isPercentage: isPercentage,
isReversed: isReversed,
};
}
const x = row.wedate;
const y = parseFloat(row.value1);
let dataPoint = { x, y };
if (row.value2 !== null) {
dataPoint.y2 = parseFloat(row.value2);
chartsData[chartname].hasValue2 = true;
}
if (row.value3 !== null) {
dataPoint.y3 = parseFloat(row.value3);
chartsData[chartname].hasValue3 = true;
}
chartsData[chartname].data.push(dataPoint);
chartsData[chartname].isPercentage = isPercentage; // Set isPercentage property for the chart
chartsData[chartname].isReversed = isReversed; // Set isReversed property for the chart
});
return Object.values(chartsData);
Based on the code and demo you provided, there are Highcharts styles loaded in your project and they override the chart options. In that case, you need to use CSS styling to fix that. You can read more about styles in Highcahrts in the following article: https://www.highcharts.com/docs/chart-design-and-style/style-by-css
.highcharts-yaxis .highcharts-axis-line {
stroke-width: 10;
}