Basic Line Plot in Highcharts (JavaScript)

The same plot in 14 other libraries — JavaScript: Chart.js, D3.js, Apache ECharts, MUI X Charts; Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl. Compare all 15 side by side: Basic Line Plot in Python, R, Julia and JavaScript.

A basic line plot connects data points with straight lines to show how a continuous variable changes over a sequence or time. It's ideal for revealing trends, patterns, and changes in data over ordered intervals. The simplicity of a single-line design makes it easy to interpret at a glance.

Basic Line Plot rendered with Highcharts

Renders

JavaScript source (Highcharts)

// anyplot.ai
// line-basic: Basic Line Plot
// Library: highcharts 12.6.0 | JavaScript 22.23.2
// Quality: 91/100 | Created: 2026-08-24

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ----------------------------------------
// Hourly outdoor temperature over a 48-hour window (two-day trend)
let seed = 42;
function lcg() {
  seed = (seed * 1103515245 + 12345) % 2147483648;
  return seed / 2147483648;
}

const hours = Array.from({ length: 49 }, (_, i) => i);
const temperatures = hours.map((h) => {
  const diurnal = 14 + 9 * Math.sin(((h - 9) / 24) * 2 * Math.PI);
  const drift = 1.5 * Math.sin((h / 48) * Math.PI);
  const noise = (lcg() - 0.5) * 1.2;
  return Math.round((diurnal + drift + noise) * 10) / 10;
});

// Overnight shading — the diurnal formula troughs at h=3 and h=27, so night
// (roughly 9pm-9am) spans these windows within the 0-48h range
const nightBandColor = Highcharts.color(t.inkSoft).setOpacity(0.06).get("rgba");
const nightBands = [
  { from: 0, to: 9, color: nightBandColor },
  { from: 21, to: 33, color: nightBandColor },
  { from: 45, to: 48, color: nightBandColor },
];

// Peak/trough callout for a clear focal point
let peakIdx = 0;
let troughIdx = 0;
temperatures.forEach((v, i) => {
  if (v > temperatures[peakIdx]) peakIdx = i;
  if (v < temperatures[troughIdx]) troughIdx = i;
});

// --- Chart -------------------------------------------------------------------
Highcharts.chart("container", {
  chart: {
    type: "line",
    backgroundColor: "transparent",
    animation: false,
    style: { fontFamily: "inherit" },
  },
  credits: { enabled: false },
  colors: t.palette,
  title: {
    text: "line-basic · javascript · highcharts · anyplot.ai",
    style: { color: t.ink, fontSize: "22px", fontWeight: "600" },
  },
  xAxis: {
    title: {
      text: "Hour of Observation",
      style: { color: t.inkSoft, fontSize: "16px" },
    },
    lineColor: t.inkSoft,
    tickColor: t.inkSoft,
    gridLineColor: t.grid,
    tickInterval: 6,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
    plotBands: nightBands,
  },
  yAxis: {
    title: {
      text: "Temperature (°C)",
      style: { color: t.inkSoft, fontSize: "16px" },
    },
    gridLineWidth: 1,
    gridLineColor: t.grid,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
  },
  legend: { enabled: false },
  tooltip: { enabled: false },
  plotOptions: {
    series: { animation: false },
    line: {
      lineWidth: 3,
      marker: { enabled: true, radius: 3, fillColor: t.palette[0], lineWidth: 0 },
    },
  },
  series: [
    {
      name: "Temperature",
      type: "line",
      data: temperatures,
      color: t.palette[0],
    },
    {
      name: "Peak / Trough",
      type: "scatter",
      data: [
        {
          x: peakIdx,
          y: temperatures[peakIdx],
          name: `Peak ${temperatures[peakIdx]}°C`,
          dataLabels: { verticalAlign: "bottom", y: -14 },
        },
        {
          x: troughIdx,
          y: temperatures[troughIdx],
          name: `Trough ${temperatures[troughIdx]}°C`,
          dataLabels: { verticalAlign: "top", y: 14 },
        },
      ],
      color: t.amber,
      marker: { radius: 6, lineColor: t.pageBg, lineWidth: 2 },
      dataLabels: {
        enabled: true,
        format: "{point.name}",
        style: { color: t.ink, fontSize: "13px", fontWeight: "600", textOutline: "none" },
      },
      enableMouseTracking: false,
      showInLegend: false,
      zIndex: 5,
    },
  ],
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/line-basic/highcharts/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "line-basic",
  "language": "javascript",
  "library": "highcharts",
  "page": "https://anyplot.ai/line-basic/javascript/highcharts",
  "hub": "https://anyplot.ai/line-basic",
  "code_json": "https://api.anyplot.ai/specs/line-basic/highcharts/code",
  "spec_json": "https://api.anyplot.ai/specs/line-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/line-basic/javascript/highcharts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/line-basic/javascript/highcharts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/line-basic/javascript/highcharts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/line-basic/javascript/highcharts/plot-dark.html",
  "quality_score": 91.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Line Plot on anyplot.ai.

Other implementations