Блог

Мне нужно создать настраиваемую внешнюю подсказку для моего проекта.

Вот как это выглядит сейчас gt;gt;gt;

2-е изображение-это то, как оно должно выглядеть gt;gt;gt;

Мой dataset :

 datasets: [  //Systolic Avarage Line --------  {  label: 'Systolic Avarage Line',  backgroundColor: 'transparent',  data: bloodPressureData?.systolicAvarageLine?.data,  borderWidth: 2,  borderColor: 'rgb(0,0,0,0.15)',  pointBorderWidth: 0,  pointRadius: 1,  order: 9,  type: 'line'  },  //Diastolic Avarage Line --------  {  label: 'Diastolic Avarage Line',  backgroundColor: 'transparent',  data: bloodPressureData?.diastolicAvarageLine?.data,  borderWidth: 2,  borderColor: 'rgb(0,0,0,0.15)',  pointBorderWidth: 0,  pointRadius: 1,  order: 9,  type: 'line'  },  //Systolic Bar --------  {  label: 'Systolic Bar',  backgroundColor: bloodPressureData?.sysBar?.map((item) =gt; {  const colorsArr = item?.colors;  const colorFound = colorsArr?.reduce((prev, current) =gt;   prev?.riskScore gt;  current?.riskScore ? prev : current  );  return colorFound?.color;  }),  data: bloodPressureData?.sysBar?.map((v) =gt; [v?.max, v?.min]),  barThickness: 14,  maxBarThickness: 14,  barPercentage: 1,  categoryPercentage: 1,  borderRadius: 50,  order: 2  },  //Diastolic Bar --------  {  label: 'Diastolic Bar',  backgroundColor: theme.palette.primary.main,  data: bloodPressureData?.diaBar?.map((v) =gt; [v?.max, v?.min]),  barThickness: 14,  maxBarThickness: 14,  barPercentage: 1,  categoryPercentage: 1,  borderRadius: 50,  order: 8  },  //Systolic Min Scatter --------  {  label: 'Systolic Min Scatter',  backgroundColor: () =gt; {  const selectedColorArr = bloodPressureData?.sysMin?.colors?.map(  (item) =gt; {  const colorObj = item.reduce((prev, current) =gt;   prev?.riskScore gt;  current?.riskScore ? prev : current  );  return colorObj?.color;  }  );  return selectedColorArr;  },  data: bloodPressureData?.sysMin?.data,  pointBorderColor: theme.palette.common.black[700],  pointBorderWidth: 0,  pointRadius: 7.5,  pointHoverRadius: 9,  order: 1,  type: 'scatter'  },  //Systolic Max Scatter --------  {  label: 'Systolic Max Scatter',  backgroundColor: () =gt; {  const selectedColorArr = bloodPressureData?.sysMax?.colors?.map(  (item) =gt; {  const colorObj = item?.reduce((prev, current) =gt;   prev?.riskScore gt;  current?.riskScore ? prev : current  );  return colorObj?.color;  }  );  return selectedColorArr;  },  data: bloodPressureData?.sysMax?.data,  pointBorderColor: theme.palette.common.black[700],  pointBorderWidth: 0,  pointRadius: 7.5,  pointHoverRadius: 9,  order: 1,  type: 'scatter'  },  //Diastolic Min Scatter --------  {  label: 'Diastolic Min Scatter',  backgroundColor: theme.palette.primary.main,  data: bloodPressureData?.diaMin?.data,  pointBorderColor: theme.palette.common.black[700],  pointBorderWidth: 0,  pointRadius: 7.5,  pointHoverRadius: 9,  order: 6,  type: 'scatter'  },  //Diastolic Max Scatter --------  {  label: 'Diastolic Max Scatter',  backgroundColor: theme.palette.primary.main,  data: bloodPressureData?.diaMax?.data,  pointBorderColor: theme.palette.common.black[700],  pointBorderWidth: 0,  pointRadius: 7.5,  pointHoverRadius: 9,  order: 7,  type: 'scatter'  } ]  

And my options.tooltips looks like below:

 tooltips: {  enabled: true,  callbacks: {  title: (tooltipItem, data) =gt; {  if (selectedTimeSpan === TimeSpan.TODAY) {  return `${data['labels'][tooltipItem[0]['index']]}:00`;  } else if (selectedTimeSpan === TimeSpan.WEEK) {  return `${getWeekHoverTitle(  data['labels'][tooltipItem[0]['index']]  )} ${moment(selectedDateTime).format('MMMM').slice(0,3)} ${  data['labels'][tooltipItem[0]['index']]  }`;  } else if (selectedTimeSpan === TimeSpan.MONTH) {  return `${data['labels'][tooltipItem[0]['index']]} ${moment(  selectedDateTime  ).format('MMMM')} `;  } else {  return `${moment(  `${data['labels'][tooltipItem[0]['index']]}`,  'MM'  ).format('MMMM')}`;  }  },  beforeLabel: function () {  return `Systolic`;  },  label: function (tooltipItem, data) {  return `${data['datasets'][2]['data'][tooltipItem['index']]} ${measurementValueKey}`;  // data['datasets'][0]['data'][tooltipItem['index']]  },  afterLabel: function (tooltipItem, data) {  return `${data['datasets'][2]['data'][tooltipItem['index']]} ${measurementValueKey}`;  // data['datasets'][0]['data'][tooltipItem['index']]  },  },  mode: 'index',  intersect: false,  caretSize: 6,  displayColors: true,  yPadding: 10,  xPadding: 20,  borderWidth: 0,  bodySpacing: 10,  titleFontSize: 16,  backgroundColor: '#6E759F',  titleFontColor: theme.palette.common.white,  bodyFontColor: theme.palette.common.white,  footerFontColor: theme.palette.common.white },